Skip to main content

Tooltips

Before you can use tooltips: You need to make sure tippy.js is loaded in your project. For more information on installing tippy.js, please visit our installation guide.

Position​

You can add a tooltip to any HTML element by adding three data properties:

  1. data-tippy = This is the text you want the tooltip to display.
  2. data-tippy-arrow = toggles the arrow on and off.
  3. data-tippy-placement = position the tooltip top, bottom, left, right.

Top​

I am a tooltip. Hover me.
  <span data-tippy-placement="top" data-tippy="I am a tooltip" data-tippy-arrow="true">I am a tooltip.  Hover me.</span>

Bottom​

I am a tooltip. Hover me.
  <span data-tippy-placement="bottom" data-tippy="I am a tooltip" data-tippy-arrow="true" >I am a tooltip.  Hover me.</span>
I am a tooltip. Hover me.
  <span data-tippy-placement="right" data-tippy="I am a tooltip" data-tippy-arrow="true" >I am a tooltip.  Hover me.</span>

Left​

I am a tooltip. Hover me.
  <span data-tippy-placement="left" data-tippy="I am a tooltip" data-tippy-arrow="true" >I am a tooltip.  Hover me.</span>