Tooltip

Tooltips float over the layout and provide additional information about elements in the user interface or features upon hover or focus.

Class	Type
`tooltip`	Tooltip	A class representing a tooltip

Components

Tooltips consist of two components:

Class	Type
`tooltip-popup`	Text
`is-bottom`	Align Bottom	The tooltip will appear below the element.
`is-center`	Align Center	The tooltip will be align center to the partial
`is-end`	Align Center	The tooltip will be align end of the partial


      <button class="tooltip" aria-label="variables info">

        <span class="icon-info" aria-hidden="true"></span>

        <span class="tooltip-popup" role="tooltip">Set variables or secret keys.</span>

      </button>

      <button class="tag tooltip">

        <span class="icon-duplicate" aria-hidden="true"></span>

        <span class="text">User ID</span>

        <span class="tooltip-popup" role="tooltip">

          <p class="text u-margin-block-start-8">Set variables or secret keys.</p>

        </span>

      </button>

      <button class="tag tooltip">

        <span class="icon-duplicate" aria-hidden="true"></span>

        <span class="text">User ID</span>

        <span class="tooltip-popup is-bottom" role="tooltip">Set variables or secret keys.</span>

      </button>