Lovelace: Button card

[Mariusthvdb (Marius)]

had 2 issues at least: a wrong js code, should be window.location.pathname and in my case moe specifically window.location.pathname.split('/')[1] to get the dahsboard url. Secondly, I had an incorrectly placed ‘(’ in the bottom variables path…

resulting in a corrected:

      - type: custom:button-card
        template: button_shortcut_menu
        icon: >
          [[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
              ? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
              ? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
        variables:
          path: >
            [[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
              ? 'developer' : 'weer_klimaat' ; ]]]

this is working fine now, but still feels somewhat complex, having to repeat the template on all options. did post in the state-switch thread, hope that could simplify things a bit, if at all possible, now or in the future.

[RomRider]

@Mariusthvdb

this is working fine now, but still feels somewhat complex, having to repeat the template on all options.

Use a variable

variables:
  is_path_matching: "[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]"
tap_action:
  action: navigate
  navigation_path: >
    [[[ return variables.is_path_matching ? '/ui-settings/developer' : '/lovelace/weer_klimaat' ]]]

[Mariusthvdb (Marius)]

ha, yes, that’s cool of course. Makes it easier on the eye indeed. Will adjust like that.
Thanks!
Won’t that interfere with the variable option I already use in the button itself?

Still, I’d need that for all options… so it wont really make it much shorter.

      - type: custom:button-card
        template: button_shortcut_menu
        variables:
          dashboard: >
            [[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]
          path: >
            [[[ return variables.dashboard ? 'developer' : 'home_energy'; ]]]
        icon: >
          [[[ return variables.dashboard ? 'mdi:remote-desktop' : 'mdi:flash'; ]]]
        tap_action:
          action: navigate
          navigation_path: >
            [[[ return variables.dashboard
             ? '/ui-settings/developer' : '/ui-data/home_energy'; ]]]
#        variables:
#          path: >
#            [[[ return variables.dashboard ? 'developer' : 'home_energy'; ]]]

I’d hoped something like this would have been possible:

- type: custom:button-card
  template: button_shortcut_menu
  variables:
    is_path_matching: >
      [[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]
  tap_action:
  action: navigate
  state:

    - operator: template
      value: >
            [[[ return variables.is_path_matching ]]
      icon: mdi:remote-desktop
      navigation_path: /ui-settings/developer
      variables: 
        path: developer 

    - default:
      icon: states['sensor.weather_icon'].state
      navigation_path: /lovelace/weer_klimaat
      variables: 
        path: weer_klimaat

fyi this is my template button_shortcut_menu:

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)';
          ]]]

[Mariusthvdb (Marius)]

am afraid I keep getting this error:
Chrome:

using the above setup

Safari:

[Marcus_Lundblad (labaland)]

How do i split the state text in 2 rows? <br> works with name but how to do it with state?

[RomRider]

@Mariusthvdb

am afraid I keep getting this error:

You can’t have a variable that uses another variable that’s why you have this error.

@Marcus_Lundblad

How do i split the state text in 2 rows? <br> works with name but how to do it with state?

You can use state_display with templates for that

[Mariusthvdb (Marius)]

@Tomahawk

Is it possible to set a “help-text” or see the button name, when hovering over the button?

a bit late to the party on this subject, but has it been added to the butt0n-card options? cant find anything on it, and need some hovering popup texts, just like with Custom Header:

sorry If I missed it after reading through +3000 posts…

[petro]

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>

[Mariusthvdb (Marius)]

@RomRider

You can’t have a variable that uses another variable that’s why you have this error.

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?

[RomRider]

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.

[Mariusthvdb (Marius)]

@petro

They are called “tooltip”.

of course…

must have a look how to do that… and where to put it in the card config.

thanks for the pointer!

[petro]

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.

[Mariusthvdb (Marius)]

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…

[Pirol62 (Jörg Nauen)]

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?

[petro]

I’ve already told you!

Output this HTML into the label, name, state, or custom field.

@petro

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

[petro]

template the state field for that particular button with the following code:

state_display: "[[[ return entity.state.split('.')[0]; ]]]"

[Pirol62 (Jörg Nauen)]

State_display. That’s what I was looking for.
You made my day. Thank you.

[Mariusthvdb (Marius)]

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.

[petro]

Hover over the word “hover” and the toolyip should appear. If that doesn’t work then it can’t be done.

[KTibow (Kendell R)]

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;
  }