The tooltip component is used to display a short description when the mouse is over a specific element.


To create a tooltip, you need to add the [data-tooltip] attribute to the target element, along with the selector of the element you will use as the tooltip.

The selector used can either be a class name, a data attribute, or an ID, as in the example below.

Tooltip on top
This is a basic tooltip
Tooltip on bottom
This is a basic tooltip
Tooltip on left
This is a basic tooltip
Tooltip on right
<div class="button" data-tooltip="#awesome-tooltip">
  Button with tooltip
  <div id="awesome-tooltip" class="tooltip">
    <strong>This is a basic tooltip</strong>

Note that to style the tooltip element you should add the .tooltip class to it.

You can use the component as a jQuery plugin:


Or as a vanilla constructor:

 import Tooltip from 'garden/src/js/components/tooltip'

 let options = {
   placement: 'bottom'

 new Tooltip(document.querySelector('.some-selector'), options)

As you noticed in the example above, the Tooltip constructor receives two parameters. The first one is the target element, and the second is an object with the options described below. You can also use the available options from popper.js *.


These are the options you can use to customize your tooltip.

Option Type Default Description
placement String 'top' A tooltip can be positioned at the 'top', 'bottom', 'left', or 'right'
offset Number 0 Amount of pixels the tooltip will be shifted

* This component uses the popper.js library to deal with positioning issues.