Doggo Storybook 0.9.0

Tooltip

Renders content with a tooltip.

Read more Read less

There are different ways to render a tooltip. This component renders a <div> with the tooltip role, which is hidden unless the element is hovered on or focused. For example CSS for this kind of tooltip, refer to ARIA: tooltip role.

A simpler alternative for styled text-only tooltips is to use a data attribute and the attr CSS function. Doggo does not provide a component for that kind of tooltip, since it is controlled by attributes only. You can check Pico CSS for an example implementation.

Usage

With an inline text:

<p>
  Did you know that the
  <.tooltip id="labrador-info">
    Labrador Retriever
    <:tooltip>
      <p><strong>Labrador Retriever</strong></p>
      <p>
        Labradors are known for their friendly nature and excellent
        swimming abilities.
      </p>
    </:tooltip>
  </.tooltip>
  is one of the most popular dog breeds in the world?
</p>

If the inner block contains a link, add the :contains_link attribute:

<p>
  Did you know that the
  <.tooltip id="labrador-info" contains_link>
    <.link navigate={~p"/labradors"}>Labrador Retriever</.link>
    <:tooltip>
      <p><strong>Labrador Retriever</strong></p>
      <p>
        Labradors are known for their friendly nature and excellent
        swimming abilities.
      </p>
    </:tooltip>
  </.tooltip>
  is one of the most popular dog breeds in the world?
</p>
Labrador Retriever
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
contains_link :boolean If `false`, the component sets `tabindex="0"` on the element wrapping the inner block, so that the tooltip can be made visible by focusing the element. If the inner block already contains an element that is focusable, such as a link or a button, set this attribute to `true`. false
Required id * :string
rest :global Any additional HTML attributes.
Required inner_block * :slot 
<Phoenix.Component.link navigate="/labradors">
  Labrador Retriever
</Phoenix.Component.link>
Required tooltip * :slot 
<:tooltip>
  <p><strong>Labrador Retriever</strong></p>
  <p>
    Labradors are known for their friendly nature and excellent
    swimming abilities.
  </p>
</:tooltip>