Tooltip
The tooltip is used to specify extra information about a field.
Usage
The tooltip is built using a combination of form classes and general use components such as the information box. When a user clicks on the tooltip a container will appear with additional information for the relevant input field.
The tooltip is used within a fieldset, above the input element. It is built using a button element with a class of .slb-tooltip that displays content
from the title section of the anchor tag.
Using javascript: -
- Using BootStrap's tooltips
BootStrap has ready to use functionality for tooltips. It requires the user to initialize tooltips, the tooltip element must have
data-toggle="tooltip"for the
Javascript support
| JavaScript support class name | Description |
|---|---|
data-* |
This attribute allows for storing of custom data in a HTML element |
data-placement |
This can be used to specify the placement of the tooltip message by inputting one of the following: top, bottom, right, left. |
tooltip\tooltip.hbs
<button class="slb-tooltip" data-toggle="tooltip" title='Tool tip text here' data-placement="right">
<svg viewBox="0 0 512 512"><title>info-circle</title><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>
</button>
Source:
components/_tooltip.scss