Question

我使用twitter bootstrap工具提示功能，可以在gsp头文本中正常工作。现在我想在id =“tooltipcheck”上添加bootstrap工具提示。如果我写title =“{{data}}”，那么我可以看到工具提示，但引导工具提示似乎不起作用。是否存在js模板的问题或者还有其他问题？

<script id="myTemplate" type="text/x-handlebars-template">
<div class="row">
    <div class="span4" id="tooltipcheck" data-placement="bottom" data-toggle="tooltip"  data-original-title="{{data}}">{{data}} </div>
</div>

我正在调用这样的工具提示。

      <script>

jQuery(function ($) {
    $("#tooltipcheck").tooltip('show');

});

Answer 1

您无法在模板中设置元素的ID，因为ID必须是唯一的。请尝试将tooltipcheck更改为类：

<div class="span4 tooltipcheck" data-placement="bottom" data-toggle="tooltip" data-original-title="{{data}}">{{data}} </div>

然后使用类初始化工具提示：

$(".tooltipcheck").tooltip('show');

在把手解析模板并生成标记后，需要初始化工具提示，否则工具提示将没有任何要绑定的元素。

Answer 2

因为您正在使用动态元素，所以在将元素添加到dom之后，您需要初始化新元素的工具提示

例如：

var html = // html from template
var el = $(html).appendTo('somele');
el.find('<tooltip-element>').tooltip('show');

此外，由于您使用的是模板，我假设页面中会有多个模板实例，所以不要在模板中使用id，因为在dom中id应该只出现一次

twitter bootstrap工具提示无法在js模板中工作

2 个答案: