They are called “tooltip”. You can try adding the HTML using a template
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
aww, too bad, feared as much… wouldn’t there be a way around this? maybe introducing a config_variable next to the variables with now have?
It would be possible if variables where evaluated in the order they are declared, but it’s not the case since the variables object is a map (unordered), not an array (ordered). I can probably introduce something to cover for that edge case.
1 Like
of course…
must have a look how to do that… and where to put it in the card config.
thanks for the pointer!
It may not be possible on the full button because it requires HTML to exist. You definitely can place it on the labels/names/states/custom_field by adding the HTML in a template.
ok, so when this is one of my buttons:
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return states['sensor.weather_icon'].state ]]]
tap_action:
action: navigate
navigation_path: /lovelace/weer_klimaat
variables:
path: weer_klimaat
styles:
icon:
- color: >
[[[ return states['sensor.temperature_color_name'].state ]]]
and I’d like the tooltip to show the value of [[[ return variables.path.replace('_',' ').toUppercase() ]]]. Maybe even simpler, have it show the title of the view (though this not in the button config yet).
title: Weer & Klimaat
path: weer_klimaat
icon: mdi:weather-partly-cloudy
would you try and fit it in this button config individually, or, hoping to cut some extra code, considering it would be identical for all buttons, add it to the used button template:
button_shortcut_menu:
variables:
view: >
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
not really sure where https://www.w3schools.com/css/css_tooltip.asp leads me, so would appreciate any further nudges…
Hi, I have a silly question but definately no idea how to solve.
Im displaying an input_number state.
This state is always shown as X.X
How can I template the state and show the number without ,x only like an integer?
I’ve already told you!
Output this HTML into the label, name, state, or custom field.
template the state field for that particular button with the following code:
state_display: "[[[ return entity.state.split('.')[0]; ]]]"
1 Like
State_display. That’s what I was looking for.
You made my day. Thank you.
yes, I saw that, thanks, and tried various things with it…
button_shortcut_menu:
name: >
[[[
return `<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>`
]]]
or
button_shortcut_menu:
name: >
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div> ]]]
the top doesn’t show anything, the bottom does this:
so I am on the wrong track here, missing the obvious (or not so…)
also tried to use a custom_field ‘tooltip’ which seemed appropriate, but again, nothing happening, probably also because I haven’t set any styles yet, relying on the default settings for starters.
Hover over the word “hover” and the toolyip should appear. If that doesn’t work then it can’t be done.
You need to add styling:
extra_styles: |
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
3 Likes
I was unaware you ccould create css classes. Nice
ok, as said I hadn’t yet set styles 
so I need this to hover on the icon, since that’s the only thing showing on my buttons in the shortcut menu. please let me post what I tried:
using the adapted button_template, with the extra_styles @KTibow posted above:
button_shortcut_menu:
variables:
dashboard: >
[[[ return window.location.pathname.split('/')[1] ]]]
view: >
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
extra_styles: |
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
and the menu button itself:
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[
return `<div class="tooltip">
<ha-icon>icon='mdi:calendar'></ha-icon>
<span class="tooltiptext">Calendar</span>
</div>`
]]]
tap_action:
action: navigate
navigation_path: /lovelace/tijd_agenda
variables:
path: tijd_agenda
styles:
icon:
- color: >
[[[ return states['sensor.trash_color'].state ]]]
is this getting anywhere close to what it should be? Must be wrong somewhere because I cant see an icon anymore, nor a tooltip…
trying the html in the button code for now, if this will work, Ill try to move it to the template and need to find a way to have the icon set in the button config (maybe yet another variable?) and feed it to the template
if anyone would have a minute to help me a bit further here it would be much appreciated. Much of my troubles is caused by not being able to show the icon using the code herein I fear (copied from the docs. Or is that only allowed in custom_fields, and not the main pre-defined ones?:
icon: >
[[[
return `<div class="tooltip">
<ha-icon>icon='mdi:calendar'></ha-icon>
<span class="tooltiptext">Calendar</span>
</div>`
]]]
if I could start getting that right, next step (the tooltip) would probably be easier. If possible at all of course.
thanks of you would!
Mind making a compiled button-card for testing (manually add the template in to your setup)? Thanks!
I already tried that, but nothing shows…
- type: custom:button-card
icon: >
[[[
return `<ha-icon icon='mdi:calendar'></ha-icon>`
]]]
tap_action:
action: navigate
navigation_path: /lovelace/tijd_agenda
shows a button, tapping it works, but no icon…
This should work:
- type: custom:button-card
icon: >
[[[
return `mdi:calendar`
]]]
tap_action:
action: navigate
navigation_path: /lovelace/tijd_agenda
yes it does! and, using your extra_styles in my button template, how should I next add Petro’s template around that icon?
icon: >
[[[
return `<div class="tooltip">mdi:calendar
<span class="tooltiptext">Calendar</span>
</div>`
]]]
? obviously not…