Noora.Tooltip (noora v0.11.0)

Renders a tooltip component with a trigger, customizable size, title, description, and optional icon.

Example

<.tooltip id="help-tooltip" title="Click to learn more">
  <:trigger :let={attrs}>
    <button {attrs}>Help</button>
  </:trigger>
</.tooltip>

<.tooltip id="info-tooltip" size="large" title="Important Information" description="This feature is currently in beta.">
  <:trigger :let={attrs}>
    <span {attrs}><.icon name="info" /></span>
  </:trigger>
  <:icon>
    <.icon name="alert-circle" />
  </:icon>
</.tooltip>

Summary

Functions

tooltip(assigns)

Attributes

  • id (:string) (required)
  • disabled (:boolean) - Defaults to false.
  • size (:string) - Size of the tooltip. Defaults to "small". Must be one of "small", or "large".
  • title (:string) (required) - Tooltip title.
  • description (:string) - Tooltip description. Only shown when size is set to large.

Slots

  • trigger (required) - Tooltip trigger.
  • icon - Icon to be rendered inside the tooltip. Only shown when size is set to large.
  • inner_block - Content to be rendered inside the tooltip.