Tooltips

v3.x

Tooltips provide contextual information on mouse-over.

To add a tooltip to any element, add the attributes of data-toggle="tooltip", data-placement="[top|bottom|left|right]", and title="Tooltip content here". You will also need to add the jQuery tooltip() method (see below) to your page to activate the tooltips.

I'm a big fan of Neko Case!

I'm a big fan of Neko Case — Have a listen and you will be too.

Who is Neko Case?

<p>
  I'm a big fan of <strong data-toggle="tooltip" title="tooltip at right" data-placement="right">Neko Case!</strong>
</p>

<p>
  I'm a big fan of <a href="https://www.youtube.com/watch?v=6zpqDgbUa1Y" data-toggle="tooltip" target="_blank" title="tooltip at top" data-placement="top">Neko Case</a> — Have a listen and you will be too.
</p>

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Watch Neko Case Videos</button>

<p>
  Who is Neko Case? <i class="fa fa-fw fa-info-circle bright-blue" aria-hidden="true" data-toggle="tooltip" title="Tooltip at bottom" data-placement="bottom"></i>
</p>

Custom CSS

Custom CSS is required to change the tooltip background, font color, font size, margin and padding of your tooltips.

View all custom Bootstrapr.io CSS

.tooltip .tooltip-inner {
  background-color: darkred ;
  color: white;
  font-size: 1.25rem;
  margin-top: 10px;
  padding: 8px;
  }

Custom JS

Custom javascript may be required to activate the tooltips in the page.

$('[data-toggle="tooltip"]').tooltip();