Understanding Tooltip in Bootstrap 3

Bootstrap 3 Tooltip: Tooltips are the small pop up box that appear over the element as user hover the elements prompting the extra information instantly. This is another component provided in Bootstrap that uses specific JS library and often termed as bootstrap 3 tooltip plugin. Here is simple example for Bootstrap 3 tooltip with code to begin with.
bootstrap default tooltip example

Bootstrap tooltip default position is top of the elements

In this blog we will reading the basic facts about tooltip functionality in Bootstrap

Bootstrap Tooltip Example

Creating Tooltip in Bootstrap: To start with tooltip you need to add the special markup data-toggle=”tooltip” to the elements that call the function which will then must take its effect from the JS library respectively. And in Title attribute one needs to add the value to get it shown in the tooltip area respectively. With in this title attribute one can add useful information to the viewers accordingly. Now We will use tooltip with buttons, icons and more styles below on suitable examples.

  <h3>HTML Structure in Bootstrap 3 Tooltip</h3>
<div class="bs-example"> 
    <ul class="list-inline">
        <li><a href="http://www.tutorialmines.net" data-toggle="tooltip" title="Default Bootstrap 3 Tooltip">Home</a></li>
        <li><a href="#" data-toggle="tooltip" title="Step by Step Bootstrap 3 Tutorials">Bootstrap Tutorials</a></li>
        <li><a href="http://www.tutorialmines.net/bootstrap-3-interview-questions-answers/" data-toggle="tooltip" data-placement="bottom" title="Bootstrap 3 Interview Questions and Answers">Bootstrap Q & A</a></li>

This tooltip content is then generally wrapped inside the .tooltip-inner container which is presided by .tooltip-arrow container. And then the main parent div under the .tooltip class only. Here is the general HTML markup that will be generated by this Bootstrap tooltip plugin respectively.

<div class="tooltip" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text! //Place tooltips with Buttons, Anchors, Glyphicons, HTML and more!
Bootstrap tooltips with zero length title don’t appear at all.

Bootstrap Tooltip CSS

Below given is the default CSS for tooltip in Bootstrap 3 which then one can override with custom values whenever required.

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;
  line-break: auto;

Also the corresponding CSS of elements surrounding the tooltip is given below:

.tooltip.in {  opacity: 0.9;  filter: alpha(opacity=90);}
.tooltip.top {  margin-top: -3px;  padding: 5px 0;}
.tooltip.right {  margin-left: 3px;  padding: 0 5px;}
.tooltip.bottom {  margin-top: 3px;  padding: 5px 0;}
.tooltip.left {  margin-left: -3px;  padding: 0 5px;}
.tooltip-inner {  max-width: 200px;  padding: 3px 8px;  color: #fff;  text-align: center;  background-color: #000;  border-radius: 4px;}
.tooltip-arrow {  position: absolute;  width: 0;  height: 0;  border-color: transparent;  border-style: solid;}
.tooltip.top .tooltip-arrow {  bottom: 0;  left: 50%;  margin-left: -5px;  border-width: 5px 5px 0;  border-top-color: #000;}
.tooltip.top-left .tooltip-arrow {  bottom: 0;  right: 5px;  margin-bottom: -5px;  border-width: 5px 5px 0;  border-top-color: #000;}
.tooltip.top-right .tooltip-arrow {  bottom: 0;  left: 5px;  margin-bottom: -5px;  border-width: 5px 5px 0;  border-top-color: #000;}
.tooltip.right .tooltip-arrow {  top: 50%;  left: 0;  margin-top: -5px;  border-width: 5px 5px 5px 0;  border-right-color: #000;}
.tooltip.left .tooltip-arrow {  top: 50%;  right: 0;  margin-top: -5px;  border-width: 5px 0 5px 5px;  border-left-color: #000;}
.tooltip.bottom .tooltip-arrow {  top: 0;  left: 50%;  margin-left: -5px;  border-width: 0 5px 5px;  border-bottom-color: #000;}
.tooltip.bottom-left .tooltip-arrow {  top: 0;  right: 5px;  margin-top: -5px;  border-width: 0 5px 5px;  border-bottom-color: #000;}
.tooltip.bottom-right .tooltip-arrow {  top: 0;  left: 5px;  margin-top: -5px;  border-width: 0 5px 5px;  border-bottom-color: #000;}

Bootstrap Tooltip js

With following code the tooltip js function is called to run this specific property of popup content to the elements.

$(function () {
This code will enable tooltips everywhere on a page with data toggle attribute.

You can also do following changes with Bootstrap Tooltip JS.

$('#element').tooltip('show')       //Show Element Tooltip
$('#element').tooltip('hide')       //Hide the Element Tooltip
$('#element').tooltip('toggle')     //Toggle on Bootstrap tooltip
$('#element').tooltip('dispose')    //Hide and destroy tooltip
$('#element').tooltip('enable')     //Enable the Bootstrap tooltip (By default)
$('#element').tooltip('disable')    //Disable the Bootstrap Tooltip (Can be Re-enabled)
$('#element').tooltip('toggleEnabled') //Enables ability to toggle tooltip
$('#element').tooltip('update')  //Update position of the tooltip

Bootstrap Tooltip Position

Although By default the position is top of the element, With bootstrap you get the following positions of top bottom left and right respectively. These are set with the help of data-placement CSS attribute within element to position as per the design requires.

  • Bootstrap tooltip position Top
  • Bootstrap tooltip position left
  • Bootstrap tooltip position Bottom
  • Bootstrap tooltip position Right

Bootstrap tooltip position top left bottom right

Bootstrap Tooltip Style

You can add many styles with Bootstrap tooltip. Here we are going to study some of them with their special characteristics with Buttons, Icons (Glyphicons), Disable hover, Change Color, Change Background color, Bootstrap Tooltip with html content, Width and position as well to give custom design to the viewers in a perfect way.

Bootstrap Tooltip with Html content

You can place any HTML content with specific style but you have to set the HTML values to be true with JS to get the right results accordingly.

Bootstrap Tooltip Arrow

The small arrow that connects the element with the tooltip content has its own set of specific Default CSS values which then must be overridden to get the desired affect.

.tooltip-arrow {  
   position: absolute;  
   width: 0;  
   height: 0;  
   border-color: transparent;  
   border-style: solid;

Bootstrap Tooltip Arrow Style : Now one can add new colors, border-colors, shadows, background color and more with specific CSS changes.

  • Bootstrap tooltip arrow color:
  • Bootstrap tooltip arrow background color
  • Bootstrap tooltip arrow border type
  • Bootstrap tooltip arrow border color
  • Use the following values and check the result for desired result.

    .tooltip.top .tooltip-arrow {
        border-top-color: red!important; border-style: dotted;

Bootstrap tooltip arrow color change

Bootstrap tooltip Color Change

All the properties of tooltip with respect to color are handled with specific class .tooltip-inner where the default values are given with text color as White(#fff) and background color as black #000;. Both values can be changed to get the desired affect for tooltip color respectively.

.tooltip-inner {color: #FFFF00;  background-color:#FF0000;  }

Bootstrap tooltip change background color: Here are the new CSS values for change in text and background color respectively.
Bootstrap tooltip Color

.tooltip-inner {
  color: #FFFF00;  

Bootstrap Tooltip Width

Tooltips are set in the container .tooltip-inner which has CSS{ max-width: 200px;} so any title longer than this length is bound to get wrapped. To increase this length you need to override the default CSS with specified amount. Here is bootstrap tooltip width example with CSS values.

.tooltip-inner {  max-width: 80px; }

Bootstrap Tooltip Width

Bootstrap Tooltip Button Example

You can easily equip bootstrap buttons with tooltiips with multiple types i.e. default, primary, success, warning, danger etc.
bootstrap 3 tooltip button style

Bootstrap 3 tooltip on glyphicon

To make your icons more stylish you can add Bootstrap tooltip to their design making them more informative.
Bootstrap 3 tooltip over Glyphicons Example

Bootstrap Tooltip Disable Hover

To disable hover or tooltip you need to do this via JS functionality for that specific element.

Bootstrap Tooltip Template

Here find a complete bootstrap template with tooltip example and more now!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *