# `LineaUI.Components.Tooltip`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/tooltip.ex#L1)

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).

# `tooltip`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*