Tooltip

Usage

Using a tooltip with mesh is a piece of cake, you can have the tooltips come in from different directions, as well as a dark mode. See the notation below to get started.
The tooltip attribute should be added which contains the text of the tooltip.
Note: The tooltip can be applied to any semantic element.

<button class="btn btn-secondary" tooltip="I am a tooltip">Default</button>
    
    

Position

The default position of the tooltip as at the top, but if you wish to change this, add the tooltip-position attribute equal to one of four properties:

• top
• right
• bottom
• left

<button class="btn btn-secondary" tooltip="I am a tooltip" tooltip-position="top">Top</button>
<button class="btn btn-secondary" tooltip="I am a tooltip" tooltip-position="right">Right</button>
<button class="btn btn-secondary" tooltip="I am a tooltip" tooltip-position="bottom">Bottom</button>
<button class="btn btn-secondary" tooltip="I am a tooltip" tooltip-position="left">Left</button>

Dark mode

To invert the colors of the tooltip to create a dark effect, add the tooltip-color attribute set equal to dark, see below.

<button class="btn btn-dark" tooltip="I am a dark tooltip" tooltip-color="dark">Default</button>
        
        

Variables

Add a description here:

$tooltip-enable-dark: true !default;

$tooltip-font-color: #666 !default;

$tooltip-dark-color: #323232 !default;

$tooltip-box-shadow: 
0 8px 10px 1px rgba(0, 0, 0, 0.14), 
0 3px 14px 2px rgba(0, 0, 0, 0.12), 
0 5px 5px -3px rgba(0, 0, 0, 0.2) !default;

$tooltip-padding: 12px 22px !default;

$tooltip-border-radius: 4px !default;

$tooltip-font-size: 0.875rem !default;

$tooltip-transition-time: 0.15s !default;