Bootstrap 3 Tooltip over Glyphicon

twitter-bootstrap tooltip glyphicons
user2449026 picture user2449026 · Oct 30, 2013 · Viewed 66k times · Source

Not sure if this even possible, I am trying to invoke a tooltip over a glyphicon inside an input group, my code (which does not work) is;

<div class="input-group">
<input type="text" class="form-control" name="security" id="security"><span class="input-group-addon"><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container: 'body' title="" data-original-title="Security Code"></span></span>
</div>

I'm using Bootstrap 3, and the latest version of jQuery.

Answer

Dennis picture Dennis · Oct 30, 2013

You can get a simple tooltip over the glyphicon using the title attribute (which is blank in your example).

title="info"

Working code

 // add this in your js
 // all the glyphicons having the class "my-tooltip" will show a tooltip if "title" attribute is present
 $(".my-tooltip").tooltip();

 <span class='glyphicon glyphicon-info-sign my-tooltip' title="here goes the tooltip text"></span>

Related questions

How do you change the width and height of Twitter Bootstrap's tooltips?

I created a tooltip using Twitter Bootstrap. The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line. How do I change the width of the tooltip? Is this specific to Twitter …

Read More
Styling the arrow on bootstrap tooltips

I'm trying to style tootltips using .tooltip-inner{} But i'm having troubles cause i can't find how to style tooltip small arrow. As shown on screenshot the arrow of the tooltip is black i want to add new color on that: …

Read More
Change Twitter Bootstrap Tooltip content on click

I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate …

Read More