Components
Tooltip
Petal Framework
Tooltip
Easily create a tooltip on any element. Uses the Tippy.js library under the hood.
You need to be a Pro member
to use this component.
<.button
label="Has tooltip"
data-tippy-content="Here is the tooltip"
phx-hook="TippyHook"
id="button_tooltip_example"
/>
<.button
label="Has tooltip"
data-tippy-content="Bottom tooltip"
data-tippy-placement="bottom"
phx-hook="TippyHook"
id="button_tooltip_example2"
/>
<.button
label="On click"
data-tippy-content="Here is the tooltip"
data-tippy-trigger="click"
phx-hook="TippyHook"
id="button_tooltip_example3"
/>
You can use the Tippy hook on any element. Just ensure you have the data-tippy-content
attribute, phx-hook="TippyHook"
and an id
attribute.