Glyphicon上的Bootstrap 3工具提示
Glyphicon上的Bootstrap 3工具提示
提问于 2013-10-31 00:48:57
不确定这是否可能，我正在尝试调用输入组中的字形图标上的工具提示，我的代码(不起作用)是；
<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>我使用的是Bootstrap 3和最新版本的jQuery。
回答 5
Stack Overflow用户
发布于 2013-10-31 01:02:12
您可以使用title属性(在您的示例中为空)在字形图标上获得一个简单的工具提示。
title="info"工作代码
// 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>Stack Overflow用户
发布于 2014-04-24 01:22:19
使用@MadJack的答案，我重写了你的代码，并在JSFiddle上进行了测试。
HTML：
<div class="input-group" style='margin-top: 100px;'>
<input type="text" class="form-control" name="security" id="security">
<span class="input-group-addon">
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Tooltip here">
<!-- The class CANNOT be tooltip... -->
<i class='glyphicon glyphicon-info-sign'></i>
</a>
</span>
</input>
</div>JS：
$("a.my-tool-tip").tooltip();希望这能帮上忙
JSFiddle。
-Andrew
Stack Overflow用户
发布于 2014-01-17 11:20:12
这里有个Bootstrap菜鸟。
要使用带有glyph-icon的工具提示插件，我发现成功地将glyph-icon span标记与没有href的锚点标记包装在一起：
<a data-toggle="tooltip" class="tooltipLink" data-original-title="Tooltip text goes here">
<span class="glyphicon glyphicon-info-sign"></span>
</a>此外，请确保初始化带有工具提示的链接的工具提示：
$("a.tooltipLink").tooltip();我在Bootstrap 3.03、jQuery 1.10.2 +Firefox26、Chrome32.0.1700和IE 11.0.9600上进行了测试。到目前为止，还没有任何问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19688974
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号