Menu
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.
714
How to position the tooltip - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
Answer: Use the Bootstrap . tooltip() method First of all add the data attributes data-toggle="tooltip" and data-original-title="Text" to the icon elements and finally initialize the tooltips using the Bootstrap's . tooltip() method.
Tooltips are just cosmetic though. Not css style but just a bit of JS to change how a title attribute is presented. The "rel" attribute is meant to be used to tell a bot (such as google) about the nature of a link.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
