Tooltips
Provide helpful messages through tooltips on icons menus, text hints with Furatto tooltips. Based on the Bootstrap tooltips. Four directions are available.
Building the markup
The tooltip markup is extremely easy and is all managed via data attributes, such as the placemenet, original-title
<a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="I'm on the top" id="tooltip-toggle1">Tooltip on top</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="I'm on the bottom" id="tooltip-toggle2">Tooltip on the bottom</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="I'm on the left" id="tooltip-toggle3">Tooltip on the left</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="" data-original-title="I'm on the right" id="tooltip-toggle4">Tooltip on the right</a>
Usage
Via data attributes
Add the data-toggle="tooltip" data attribute to any element really.
<a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="I'm on the top" id="tooltip-toggle1">Tooltip on top</a>
Via javascript
You can trigger the tooltip plugin via JS like so:
$('#tooltip').tooltip('show');
| Name | Type | Default | Description |
|---|---|---|---|
| placemenet | string | top | Where to display the tooltip, top, bottom, right, left. |
| original-title | string | undefined | Especifies the text to be displayed on the tooltip. |
Methods
We offer some handy methods to manage the tooltips, such as making them appear or viceversa.
| $('#example').tooltip('show') | Displays the tooltip. |
| $('#example').tooltip('hide') | Hides the tooltip. |
| $('#example').tooltip('toggle') | Toggles the tooltip. |
Available sass variables
You can always customize the tooltips styling by overwriting our sass variables.
$tooltip-font-size: 0.68571429rem !default;
$tooltip-z-index: 1030 !default;
$tooltip-padding: 0.25714286rem !default;
$tooltip-inner-padding: 0.45714286rem !default;
$tooltip-in-opacity: 1 !default;
$tooltip-color: #2E323E !default;
$tooltip-font-color: #FFF !default;
$tooltip-alignment: center !default;
$tooltip-radius: 0rem !default;
$tooltip-border-width: 0.64285714rem !default;