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.
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>
</ul>
</div>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!
</div>
</div>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 () {
$('[data-toggle="tooltip"]').tooltip()
})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 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 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.
.tooltip-inner {
color: #FFFF00;
background-color:#FF0000;
}
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 Button Example
You can easily equip bootstrap buttons with tooltiips with multiple types i.e. default, primary, success, warning, danger etc.
Bootstrap 3 tooltip on glyphicon
To make your icons more stylish you can add Bootstrap tooltip to their design making them more informative.
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!
