Hide text for badges in picture-elements card

Installation Home Assistant OS
1

Hi all,

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.

This is the configuration:

  - entity: sensor.temperatuur_woonkamer
    style:
      font-size: 10px
      left: 32%
      top: 55%
    type: state-badge

I tried adding title: but it does not change a thing.
Hoping someone can help me out.

Geert

2 Likes
2

Have you found any solution? The picture-elements card doc says:

title
(string)(Optional)
State badge tooltip. Set to null to hide.

But it does not work for me. Tried:

    - type: state-badge
      title: null
      entity: sensor.bathroom_temperature
      style:
        top: 65%
        left: 73%
        transform: 'translate(-50%, -50%) scale(0.5, 0.5)'
        font-size: 17px

But it always says “Bedroom T” (see screenshot).
Please, help to get rid of that text

12%20PM
12%20PM674×624 51.2 KB

3

Same for me. I just let it be. If somebody knows how to solve this that should be great!

4

Would love an answer too. The ‘title’ attribute is for the tooltip and not the text

5

Hello,

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.

    - type: state-badge
      entity: sensor.bathroom_temperature
      style:
        color: '#808080'
        top: 65%
        left: 73%
        transform: 'translate(-50%, -50%) scale(0.5, 0.5)'
        font-size: 17px

Regards

1 Like
6

Also searching for a way to do this.

7

try:
color: rgba(0,0,0,0)

the last zero sets opacity to 0 so the other zeroes doesnt really mather (0-255)
doesn’t work on all browsers
https://caniuse.com/#search=rgba

16 Likes
8

this works for me!
Browser is Google Chrome.

9

Any update on this?
I’m also trying to get rid of the text beneath a badge on a picture elements card.

10

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:

type: picture-elements
elements:
  - type: state-badge
    entity: binary_sensor.salon_salle_a_manger_presence
    style:
      top: 28%
      left: 40%
      height: 11%
      overflow: hidden
5 Likes
11

Great!

I tested your solution and it works for me on:

  • Chrome (Android)
  • Chromium (Raspberry)
12

YOU WERE SO CLOSE!
I got it because of you, thank you!

style:
  color: transparent
15 Likes
13

Hmm, when I’m using the HA App on Android the text is shown.

15

Works for me, Thanks :+1:

1 Like
16

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.

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.temperature
    style:
      top: 28%
      left: 40%
      '--ha-label-badge-title-font-size': 0em
21 Likes
17

Thank you!

4 Likes
18

this is the best solution

4 Likes
19

editing in YAML and adding name: ' ' should work