Components Tooltip
Petal Framework

Tooltip

v0.1.0 +
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.