I’m afraid i might be overlooking something but cannot get it to work the way i would like it.
In my floorplan i added some badges for temperature. I would like to only see the badge and not the text below that.
Also interested in a solution.
In the meantime, in your exemple, you can define the text the same color as your bed-sheet, it will blend nicely. But for me, on a 3D gradient background, this technique isn’t working.
The issue with this solution is that the text is still there so the mouse cursor change when the text is hovered and it can be clicked.
Regarding the title attribute, the documentation says it’s for the tooltip (the text shown when the mouse is left over the element a few seconds) so it won’t help.
I managed to crop the element using height and overflow:
My problem with the above solutions is that using transparant text the alignment is still affected by the text, and fixing the height seems to be unstable on what height to set.
I finally settled on setting the font size to 0, this way the alignment of the elements is not affected by the non-visible text.