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>

Right#

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>