Tooltips in Kickstart come in many flavors with an optional additional element for specifying the part of the html that will trigger the appearance of the tooltip(s)
Tooltips are implemented in a dataset attribute of the HTML.
Tooltips have a trigger (the hovered item that launches the tooltip) and an anchor (the element the tooltip anchors to).
<button class="button" data-ks-tooltip="I'm a tooltip">Hover over me</button>
By default, the trigger and the anchor are the same element. However,
an optional .tooltip_trigger class
tooltip-trigger() mixin is available.
This defines a general hover zone where child tooltips will show.
<div class="tooltip_trigger">
<ul class="list list-unstyled">
<li>
<a href="#" data-ks-tooltip="Create a new account here">Signup</a>
</li>
<li>Benefits to signing up include our monthly email</li>
<li>
<a href="#" data-ks-tooltip="Start here if you already have an account" data-ks-tooltip-position="bottom">Login</a>
</li>
</ul>
</div>
<div class="decision">
<ul>
<li>
<a href="#" data-ks-tooltip="Create a new account here">Signup</a>
</li>
<li>Benefits to signing up include our monthly email</li>
<li>
<a href="#" data-ks-tooltip="Start here if you already have an account" data-ks-tooltip-position="bottom">Login</a>
</li>
</ul>
</div>
.decision {
@include tooltip_trigger();
}
Adding content to the dataset of an element only allow for plaintext. However, your tooltips may need something more sophisticated that can only be expressed by HTML.
For this, tooltips can also be created as individual HTML elements.
Avoid nesting flow elements in phrasing elements.
Flow elements like <div> or <p> are not allowed nested in a <p>
Some browsers will even take it right out for you. Stick to phrasing
elements like <span> or <a>
More on flow and phrasing elements.
The rain in Spain
Spain is a country in Europe. falls mainly on the plains.
Note there is no special mixin for .tooltip as the content is so specific
to being a tooltip, the class should be semantic already.
<p>The rain in
<span class="tooltip_trigger">
<a href="#">Spain</a>
<span class="tooltip">
<img src="/img/spain.png" style="width: 50px; margin: 0px auto; display: block;"/>
Spain is a country in <em>Europe</em>
</span>
falls mainly on the plain.
</span>
</p>
<p>The rain in
<span class="country">
<a href="#">Spain</a>
<span class="tooltip">
<img src="/img/spain.png" style="width: 50px; margin: 0px auto; display: block;"/>
Spain is a country in <em>Europe</em>
</span>
falls mainly on the plain.
</span>
</p>
.country {
@include tooltip_trigger();
}
Try the colors Red, Green, and Blue (Hover over these)
HoverI'm a tooltip! overI'm a tooltip! anyI'm a tooltip! ofI'm a tooltip! theseI'm a tooltip! wordsI'm a tooltip!
Choosing a color is as easy as adding a data attribute to the flow
element that spawns your tooltip or appending a tooltip-[color] class to .tooltip...
Available colors include:
tooltip-redtooltip-orangetooltip-yellowtooltip-greentooltip-bluetooltip-violetYou may also use your theme's primary and secondary colors via tooltip-primary and tooltip-secondary
<p>
Feel free to check out our
<span data-ks-tooltip="Gallery closes at 9pm" data-ks-tooltip-color="red">
Gallery
</span>.
</p>
<div class="tooltip_trigger">
<div class="tooltip tooltip-red">I'm a tooltip</span>
</div>
You can also set the colors of tooltips for an entire trigger area
<div class="tooltip_trigger tooltip_trigger-yellow">
...
</div>
.tooltip_trigger {
@include tooltip_trigger(map-get($colors, yellow));
}
Tooltips can be positioned to the top, left, right, or bottom.
<div class="tooltip_trigger">
<button class="button">Top</button>
<span class="tooltip">I'm on top</span>
</div>
<div class="tooltip_trigger">
<button class="button">Left</button>
<span class="tooltip tooltip-left">I'm on the left</span>
</div>
Tooltips use a familiar format for positioning with data-attributes.
You can position on the left or on the right.
Or on the bottom or top
<p>
You can position on the
<span data-ks-tooltip="I'm on the left" data-ks-tooltip-position="left">left</span>
or on the
<span data-ks-tooltip="I'm on the right" data-ks-tooltip-position="right">right</span>.
</p>