Подсказка twitter bootstrap не работает в шаблоне js

Я использую функциональность всплывающей подсказки twitter bootstrap, которая отлично работает в текстах заголовков gsp. Теперь я хочу добавить всплывающую подсказку начальной загрузки на id="tooltipcheck". Если я напишу 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>

I am calling tooltip like this.

      <script>

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

});


jquery twitter-bootstrap handlebars.js twitter-bootstrap-tooltip
person user1298426    schedule 13.08.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не можете установить идентификатор элемента в шаблоне, потому что идентификатор должен быть уникальным. Вместо этого попробуйте изменить tooltipcheck на класс:

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

А затем инициализируйте свои всплывающие подсказки, используя класс:

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

Всплывающие подсказки необходимо будет инициализировать после того, как handlebars проанализирует шаблон и сгенерирует вашу разметку, иначе всплывающие подсказки не будут иметь никаких элементов для привязки.

person cfs    schedule 13.08.2013
comment
Вы уверены, что ваши всплывающие подсказки инициализируются после того, как handlerbars сгенерировал вашу разметку? - person cfs; 13.08.2013
comment
как я могу это проверить? - person user1298426; 13.08.2013
comment
Точно сказать не могу; Я никогда раньше не работал с рулями, но я предполагаю, что вам нужно вызвать какой-нибудь javascript, чтобы он прочитал шаблон и вставил сгенерированный HTML на страницу. После этого вы должны инициализировать всплывающие подсказки. - person cfs; 13.08.2013

arrow_upward
0
arrow_downward

поскольку вы работаете с динамическими элементами, после добавления элементов в дом вам необходимо инициализировать всплывающую подсказку для новых элементов.

Ex:

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

Кроме того, поскольку вы используете шаблон, я предполагаю, что на странице будет несколько экземпляров шаблона, поэтому не используйте id внутри шаблона, поскольку в dom идентификатор должен присутствовать только один раз.

person Arun P Johny    schedule 13.08.2013
comment
Извините .. но я новичок в этом .. как мне получить // html из шаблона ... и затем я должен добавить к существующему тегу div? - person user1298426; 13.08.2013
comment
@user1298426 user1298426, пожалуйста, поделитесь кодом, где используется шаблон - person Arun P Johny; 13.08.2013
comment
Я не уверен, насколько это будет полезно ... но я поделился частью, связанной с шаблоном js и всплывающей подсказкой. jsfiddle.net/gaurav14u/whrUP/1 - person user1298426; 13.08.2013