LineaUI.Components.Tooltip (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's tooltip (its tippy.js look and options): a hint around a trigger, in every theme color, on twelve placements, after a delay, on hover, click or focus, following the cursor, or holding HTML.

<.tooltip id="save-tip" text="Save the draft">
  <.button>Save</.button>
</.tooltip>

<.tooltip id="top-start" text="Top Start" color="success" placement="top-start">
  <.button variant="outline" color="primary">Top Start</.button>
</.tooltip>

<.tooltip id="profile" trigger="click">
  <.button>Content</.button>
  <:content>
    <div class="flex space-x-3 p-3">…</div>
  </:content>
</.tooltip>

A tooltip is an overlay: LineaUI.open/close/toggle show and hide it by id, and open drives it from the server (when the assign changes, the server wins).

Summary

Functions

tooltip(assigns)

Renders a trigger and its tooltip.

Functions

tooltip(assigns)

Renders a trigger and its tooltip.

on_open and on_close take an event name or a JS command; an event's payload is %{"id" => id} and it goes to target when given.

<.tooltip id="delete-tip" text="Delete forever" color="error" placement="bottom-end" delay={300}>
  <.button color="error" icon aria-label="Delete">×</.button>
</.tooltip>

From the server: LineaUI.open(socket, "delete-tip"), or bind open={@show_tip}.

Attributes

  • id (:string) (required)
  • text (:string) - The hint, when there is no :content. Defaults to nil.
  • color (:string) - Defaults to "neutral". Must be one of "neutral", "light", "primary", "secondary", "info", "success", "warning", or "error".
  • placement (:string) - Defaults to "top". Must be one of "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", or "left-end".
  • trigger (:string) - hover also shows the hint when the trigger gets the keyboard focus. Defaults to "hover". Must be one of "hover", "click", "focus", or "manual".
  • delay (:integer) - Milliseconds before the hint shows or hides. Defaults to 0.
  • duration (:integer) - Milliseconds the animation lasts. Defaults to 300.
  • follow_cursor (:string) - initial places the hint where the pointer was when it showed. Defaults to nil. Must be one of nil, "both", "horizontal", "vertical", or "initial".
  • arrow (:boolean) - Defaults to true.
  • interactive (:boolean) - Whether the pointer can move onto the hint; on by default with :content. Defaults to nil.
  • open (:boolean) - Defaults to false.
  • on_open (:any) - Defaults to nil.
  • on_close (:any) - Defaults to nil.
  • target (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • tip_class (:any) - Classes for the hint's box. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
  • content - HTML content: drawn without padding, LineOne's content theme.