Tooltip

Overview

Add a tooltip when some users may need some information but some others don't.There are two ways to trigger a tooltip: hovering with the mouse and focusing with the tab key.

Random icon:

Random button:

Link:

Usage

Dependencies

To get the tooltip component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/tooltip';

import tooltip from 'design-system/src/js/01-atoms/tooltip';

Basic code

A tooltip component is simply an element with a data-toggle="tooltip" attribute and a title attribute in which you input the text you want to see displayed when hovered.

Please, note that the btn-help actually includes the tooltip function without having to add specific tooltip code. It may be a good option for you.

<!--Random icon-->
<span data-toggle="tooltip" title="Tooltip text here" tabindex="0">
  <svg class="icon icon--32 icon--secondary">
    <use xlink:href="/img/sprite.svg#icon-archive"></use>
  </svg>
</span>

<!--Random button-->
<button class="btn btn--primary" href="#" data-toggle="tooltip" title="Tooltip text here">Hover please</button>

<!--Link-->
<a href="#" data-toggle="tooltip" title="Tooltip text here">Hoverable link</a>

//- Random icon:
span(data-toggle="tooltip", title="Tooltip text here" tabindex="0")
  +icon('archive', '', '', '', '')

//- Random button:
button.btn.btn--md(href="#", data-toggle="tooltip", title="Tooltip text here")
  | Hover please

//- Link
a(href="#", data-toggle="tooltip", title="Tooltip text here")
  | Hoverable link

HTML attributes

There are two mandatory attributes to get the tooltip working. Third one is necessary for the user to be able to navigate through the tooltips with his keyboard.

• data-toggle
• title
• tabindex

Data-toggle

data-toggle is a HTML5 data attribute that automatically hooks up the element to the type of widget it is. Then we must include data-toggle="tooltip" to get the tooltip working, as you can see on the examples.

Title

Tabindex