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)

Single element

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>

Optional trigger

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.

  • Signup
  • Benefits to signing up include our monthly email
  • Login

<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();
}

Tooltips as elements

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 SpainSpain 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();
}

Coloring

Try the colors RedGreen, 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-red
  • tooltip-orange
  • tooltip-yellow
  • tooltip-green
  • tooltip-blue
  • tooltip-violet

You 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));
} 

Positioning

Tooltips can be positioned to the top, left, right, or bottom.

I'm on top 
I'm on the left 
I'm on the right 
I'm on the 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>