Renders content with a tooltip.
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.
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
Labradors are known for their friendly nature and excellent swimming abilities.
<.tooltip id="tooltip-single-with-text"> Labrador Retriever <:tooltip> <p><strong>Labrador Retriever</strong></p> <p> Labradors are known for their friendly nature and excellent swimming abilities. </p> </:tooltip> </.tooltip>
Labrador Retriever
Labradors are known for their friendly nature and excellent swimming abilities.
<.tooltip id="tooltip-single-with-link" contains_link> <Phoenix.Component.link navigate="/labradors"> Labrador Retriever </Phoenix.Component.link> <:tooltip> <p><strong>Labrador Retriever</strong></p> <p> Labradors are known for their friendly nature and excellent swimming abilities. </p> </:tooltip> </.tooltip>