Add Tooltip

[Mariusthvdb]

please consider adding a tooltip option to the tabs.
Using an icon only tabbed config (because the labels are not resizable and force us to swipe the tabs) it would be really nice to have a tooltip on hovering.
Just like the tooltip in the main header bar

if it could be done with configurable transition, even better

using this myself on all button-cards to give you an idea:

  styles:
    tooltip:
      - transition: opacity 0.5s. # <-- main concern here, and makes the tooltip immediate
      - color: var(--card-background-color)
      - font-size: 12px
      - background: var(--primary-color)
      - padding: 5px
      - border-width: 0px

thanks for considering!

[kinghat]

i wont promise anything. im trying to just keep to the features that the material design tab component offers while integrating ha cards into it. that said, it sounds like your main issue is not being able to identify tabs. can you post a screenshot and the config of your tabbed-card?

[Mariusthvdb]

type: custom:tabbed-card
#       attributes:
#         isFadingIndicator: true
styles:
  --mdc-theme-primary: gold
  --mdc-tab-color-default: var(--text-primary-color)
tabs:
  - card:
      type: custom:decluttering-card
      template: picture_glance_area

    attributes:
#             label: Laundry
      icon: mdi:washing-machine
#             stacked: true
  - card:
      type: custom:decluttering-card
      template: picture_glance_area

    attributes:
#             label: Keuken
      icon: mdi:coffee
  - card:
      type: custom:decluttering-card
      template: picture_glance_area

    attributes:
#             label: Dining
      icon: mdi:silverware
  - card:
      type: custom:decluttering-card
      template: picture_glance_area

    attributes:
#             label: Auditorium
      icon: mdi:theater

is the main config body

would only need changing label to tooltip and we wouldn't suffer the fact that using labels causes the tabs go beyond the card limits.

and I will have 4 of these in a vertical stack or so (replacing the swipe card completely...)

[kinghat]

All tabs in the Dash have these tooltips,

pretty sure i know what you mean but can you please post a screenshot of the exact tooltip youre talking about so theres no ambiguity?

(notice the slight color difference? the colors are identical however in the yaml...)

im not sure why its a different color. you are using "gold" explicitly as the color elsewhere for your theme?

[Mariusthvdb]

Yes I always use gold, not yellow ;-) I believe there is some transparency setting on the main menu header, but not even sure it is caused by my own card-mod-theme or in core:

      /* Set the color of the currently selected tab indicator. */
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--text-primary-color);
      }
      /* Set the color of the currently selected tab indicator.
         Set size of the currently selected tab icon*/
      paper-tab[aria-selected=true] {
        color: gold;
        background-color: rgba(var(--primary),0.3);
        --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
      }

this was suppsed to only blur the selected background a bit, might also effect the icon color itself

[kinghat]

ok. i just wanted to make sure that my card is giving the colors that people expect.

[Mariusthvdb]

Hi Kinghat,

reviewing my cards made me want a tooltip on your nice plugin, and then I remembered this ;-)

did you ever get a chance to have another look adding the tooltip? would still be a cool feature if at all possible.

thx!

[kinghat]

did you ever get a chance to have another look adding the tooltip? would still be a cool feature if at all possible.

i havent yet.

[Mariusthvdb]

ah right, thanks for letting me know (I already secretively glimpsed at the alpha but decided not to install that...)
cheers!