tooltip

Tooltips: a short hint shown above an element while it is hovered or focused.

ui.sized_button(
  Ghost,
  Icon,
  [attribute.aria_label("Archive"), ..tooltip.trigger("archive-tip")],
  [archive_icon],
),
tooltip.tooltip("archive-tip", [text("Archive this thread")]),

The hint describes the trigger to screen readers too. It is hidden with Escape and stays open while the pointer is over it. Keep it to a few words, since touch screens never show it; do not put anything that has to be clicked inside. The trigger and the tooltip are tied by id, so both must be in the page or both in one live view.

Values

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

</>

pub fn tooltip(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

</>

pub fn tooltip_class() -> css.Class

trigger

</>

pub fn trigger(id: String) -> List(attribute.Attribute(msg))

Attributes for the element the tooltip with this id describes. It must be focusable, such as a button or a link.