Tooltip
Basic tooltip & sizes
A tooltip can be used in any tag as long as it has the base class .tooltip, one of these positioning classes .-top, .-bottom, .-left, .-right and its content inside data-tip attribute. Use class .-persist to always display the tooltip. If the size is not specified, a tooltip will adapt its length to the content.
Example:
Hover me
<span class="tooltip -bottom -small" data-tip="This is a small tooltip" >Small Tooltip</span>
<span class="tooltip -bottom -medium" data-tip="This is a medium tooltip" >Medium Tooltip</span>
<span class="tooltip -bottom -large" data-tip="This is a large tooltip" >Large Tooltip</span>
- Tooltips can be text-only.
- Text is center aligned by default.
- Content of a tooltip should be clear/precise and lesser than 140 characters. Try to avoid adding content that is longer than two lines of text.
- Use bigger tooltip sizes ONLY when necessary
Position
<span class="tooltip -left" data-tip="This is a left tooltip">Left</span>
<span class="tooltip -right" data-tip="This is a right tooltip">Right</span>
<span class="tooltip -top" data-tip="This is a top tooltip">Top</span>
<span class="tooltip -top-left" data-tip="This is a top-left tooltip">Top Left</span>
<span class="tooltip -top-right" data-tip="This is a top-right tooltip">Top Right</span>
<span class="tooltip -bottom" data-tip="This is a bottom tooltip">Bottom</span>
<span class="tooltip -bottom-left" data-tip="This is a bottom-left tooltip">Bottom Left</span>
<span class="tooltip -bottom-right" data-tip="This is a bottom-right tooltip">Bottom Right</span>
Color variations
A tooltip can have different colors based on our colorscheme's variants. Color will be applied using the following classes: .-primary, .-success, .-warning, .-danger
<span class="tooltip" data-tip="This is a default tooltip">Default</span>
<span class="tooltip -primary" data-tip="This is an info tooltip">Info</span>
<span class="tooltip -success" data-tip="This is a success tooltip">Success</span>
<span class="tooltip -warning" data-tip="This is a warning tooltip">Warning</span>
<span class="tooltip -danger" data-tip="This is a danger tooltip">Danger</span>
Animation
Tooltips can have fade-in animation by adding the class .-fade. You can also add ease-in and ease-out effects via the class .-anim. Hover on the examples below to see the results.
<span class="tooltip -top" data-tip="This is a tooltip" >No effect</span>
<span class="tooltip -top -fade" data-tip="This is a tooltip" >Fade In/out</span>
<span class="tooltip -top -anim" data-tip="This is a tooltip" >Animated In/out</span>
Variable for tooltip
Background colors
$default-color: $primary-color-dark-80;
Delay appearance time
$delay-short: .4s;
$delay-med: 1s;
$delay-long: 1.5s;
Related mixin
Sizing
@mixin tooltip-sizing($tip-width) {
width: $tip-width;
white-space: initial;
}
Example
Usage:
@include tooltip-sizing(200px);
CSS Output:
width: 200px;
white-space: initial;
Coloring
@mixin tooltip-color($color) {
&.-bottom::before {
border-bottom-color: $color;
}
&.-top::before {
border-top-color: $color;
}
&.-right::before {
border-right-color: $color;
}
&.-left::before {
border-left-color: $color;
}
&::after {
background: $color;
}
}
Example
Usage:
.element {
@include tooltip-color($primary-color);
}
CSS Output:
.element.-bottom::before {
border-bottom-color: #1e99eb;
}
.element.-top::before {
border-top-color: #1e99eb;
}
.element.-right::before {
border-right-color: #1e99eb;
}
.element.-left::before {
border-left-color: #1e99eb;
}
.element::after {
background: #1e99eb;
}