Tooltip spark

The tooltip spark attaches a styled tooltip to any element inside a UIX Forge forged element. It uses Home Assistant's wa-tooltip component (the same component used throughout the HA frontend), so it integrates with the HA design system, supports 12 placement positions and floats above all other UI layers via the browser's Popover API.

Basic usage

Add a tooltip entry to forge.sparks:

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      for: hui-tile-card
      content: Turn on the lights
element:
  type: tile
  entity: light.kitchen_lights

The for value is a selector that locates the target element within the forged element. It supports the same DOM navigation syntax as UIX styles, including $ to cross shadow-root boundaries.

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      for: hui-tile-card $ ha-tile-icon
      content: Toggle the living room light
element:
  type: tile
  entity: light.kitchen_lights

Only the first element matched by for gets the tooltip.

Configuration

When hover is enabled, the tooltip remains open while the pointer moves from the target into the tooltip body. This allows content constrained with --uix-tooltip-max-height and --uix-tooltip-overflow: auto to be scrolled. manual does not activate automatically; set open: true to open it from the spark configuration.

forge:
  sparks:
    - type: tooltip
      trigger: manual
      open: true
      content: This tooltip is opened by the spark configuration

Templates in content

The content value is part of the forge config and is therefore processed as a template, giving you access to entity states, the config object and any other UIX template variables:

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      for: "hui-tile-card $ ha-tile-icon"
      content: >-
        {{ state_attr(config.element.entity, 'friendly_name') }} is
        {{ states(config.element.entity) }}
element:
  type: tile
  entity: light.kitchen_lights

Tooltip on a badge

Here the tooltip works on hui-badge which is the element forged by UIX Forge. Hence for: is not required as the default for: element will select hui-badge, the forged element. Generally tooltips will work with the default for: element and you only need to be more specific based on your specific use case.

# A badge placed in the dashboard header
    badges:
      - 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.movement_backyard

Customising tooltip appearance

The tooltip spark injects CSS variables into the wa-tooltip element. Override them by setting --uix-tooltip-* variables on the forged element's uix.style (or in a theme).

type: custom:uix-forge
forge:
  mold: card
  sparks:
    - type: tooltip
      for: hui-tile-card $ ha-card
      content: Custom styled tooltip
element:
  type: tile
  entity: light.kitchen_lights
  uix:
    style: |
      :host {
        --uix-tooltip-background-color: #333;
        --uix-tooltip-content-color: #fff;
        --uix-tooltip-border-radius: 999px;
      }

CSS variables reference