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;