Bootstrap 3 Tooltip over Glyphicon

Question

不确定这是否可能,我试图在输入组内的glyphicon上调用工具提示,我的代码(不起作用)是;

<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.

Answer 1

您可以使用title属性(在您的示例中为空白)在glyphicon上获得简单的工具提示.

title="info"

Answer 2

使用@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.

-安德鲁

Answer 3

这里有一个Bootstrap新手......

要使用带有字形图标的Tooltip插件,我发现使用没有href的锚标记包装glyph-icon span标记成功:

<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 + Firefox 26,Chrome 32.0.1700和IE 11.0.9600测试了这个.到目前为止,没有打嗝.

Answer 4

<span class="glyphicon glyphicon-info-sign icon_info" title="info"></span>

然后添加 javascript 代码来初始化工具提示，如下所示：

$(".icon_info").tooltip();