add example for stock header badge sparks to documentation

[Mariusthvdb]

so I found the need for a tooltip on a badge, (which I had to reduce the size of, and thus can not show it's name/state in the badge)

  type: entity
  entity: binary_sensor.donker_buiten
  hold_action:
    action: navigate
    navigation_path: /ui-sub-views/tijd
  show_state: false
  show_name: false
  uix:
    style:
      ha-badge:
        $: |
          .badge {
            {% set donker = is_state(config.entity,'on') %}
            {% set kleur = 'var(--state-sun-below_horizon-color)' if donker
               else 'var(--state-sun-above_horizon-color)' %}
            border: 2px solid {{kleur}} !important;
            box-shadow: var(--box-shadow-badges) !important;
          }
      .: |
        ha-state-icon {
          color:
            {% set donker = is_state(config.entity,'on') %}
            {% set kleur = 'var(--state-sun-below_horizon-color)' if donker
               else 'var(--state-sun-above_horizon-color)' %}
            {{kleur}};
        }

showing as (right most circular badge):

figured I could show that name and state in a tooltip, so added the basic example from the documentation, and changed to hui-badge:

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      for: "hui-badge"
      content: >-
        {{ state_attr(config.element.entity, 'friendly_name') }} is
        {{ states(config.element.entity) }}
element:
  type: entity
  entity: binary_sensor.donker_buiten

and the output was cool, but not what I wanted ;)

and then I realized there is no example for these header badges in the documentation?

so, I changed mold: card to mold: badge (as is documented ofc here https://uix.lf.technology/forge/forge/#sparks)

resulting in the correct badge again, but no tooltip

and it was not until after deleting the 'for' that I saw the tooltip popup

type: custom:uix-forge
forge:
  mold: badge
  sparks:
    - type: tooltip
      content: >-
        {{ state_attr(config.element.entity, 'friendly_name') }} is
        {{ states(config.element.entity) }}
element:
  type: entity
  entity: binary_sensor.donker_buiten

is this the correct MO now for this type of spark?

if yes, maybe add an example to the docs for it, as I can see more than 1 user would benefit from that?

[dcapslock]

Done. https://uix.lf.technology/forge/sparks/tooltip/#tooltip-on-a-badge

[Mariusthvdb]

beautiful, sweet addition.
thx