Show tooltip on hover in device bar, and truncate text when not enough space

[joepavitt]

Description

• Adds tooltip to the bar.
  • Positioning on top, instead of bottom as originally planned. This is because it made sense to show tooltip when hovering on the bar or the label, but bottom positioning it at the bottom of the label, which left white space. top binds it to the bar.
• Truncates the label (and adds ellipsis) when there isn't enough space to render the label.

Related Issue(s)

Closes #2380

Checklist

• I have read the contribution guidelines

[codecov]

Codecov Report

Merging #2536 (08be2d3) into main (8da2139) will decrease coverage by 38.26%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##             main   #2536       +/-   ##
==========================================
- Coverage   39.84%   1.59%   -38.26%     
==========================================
  Files         494     494               
  Lines       17690   17691        +1     
  Branches     4125    4125               
==========================================
- Hits         7049     282     -6767     
- Misses      10641   17409     +6768     

Flag	Coverage Δ
backend	?
frontend	1.59% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
frontend/src/components/charts/DeviceStatusBar.vue	0.00% <0.00%> (ø)

... and 174 files with indirect coverage changes

[Steve-Mcl]

👍