Components
Tooltip
Petal Pro
Tooltip
Easily create a tooltip on any element. Uses the Tippy.js library under the hood.
<.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.
How to access
Access options
This comes with Petal Pro. Purchase a membership to get access to this package. It can be used with any Phoenix project. Post-expiration, you'll retain access but won't be eligible for updates from newer versions.