bootstrap工具提示 - 使用jquery动态更改css和放置

Question

我正在使用Bootstrap v3.3.5和JQuery v1.11.3.

我有一个选择列表,当选择一个值时,我希望工具提示的placement和css类更改.

我搜索了谷歌和SO并阅读了很多SO帖子,但我做过的许多尝试都失败了.例如,这对我不起作用.

这是我的HTML代码:

<select id="id_cover_letter_type" name="cover_letter_type">
    <option value="0" selected="selected">I will write my own data</option>
    <option value="1">Standard Cover Letter</option>
    ....
</select>

<i id="id_icon_id_cover_letter_details_second_paragraph" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop" data-original-title="" title="" aria-describedby="tooltip229278"></i>

这是我的jquery代码:

我已经包含了我为改变工具提示(取自其他帖子)的数据位置所做的已注释尝试,这些尝试对我不起作用.

$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'html': true, 'placement': 'bottom', 'title': '{% trans "Paragraph 2" %} <br /><br /> {% trans "This should detail why you want the job." %} <br /><br /> {% trans "Explain how your qualifications and career plan match the advertised position." %} <br /><br /> {% trans "The details you provide here should display that you have researched the employer, what the employer and industry are seeking and that you understand what the job requires." %}'});

if ( $('#id_cover_letter_type').val() == '0' ) {

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'left';

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'left' });

    // the following, destroying, appling the placement and then showing the tooltip did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'left'});
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

    // applying the placement and the showing the tooltip did not work.
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'left'}).tooltip('show');

} else {

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'bottom';

    // the following code did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'bottom' });

    // the following, destroying, appling the placement and then showing the tooltip did not work.
    //$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'bottom'});
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');

    // applying the placement and the showing the tooltip did not work.
    //$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'bottom'}).tooltip('show');

}

另外,如果有人可以告诉我将工具提示的css更改为类名的答案custom-tooltip-styling123,那就太棒了.

编辑

这是一个jsfiddle.这只是我的第二小提琴,我不知道如何添加引导程序以显示工具提示.

Answer 1

主要问题

你忘了添加id="id_icon_id_cover_letter_details_second_paragraph"到你的img元素.

您还需要通过以下方式包装您的js代码:

$(function () { // On document ready wrapper
    // your code ...
});

最后一点是添加工具提示初始化:

$('#id_icon_id_cover_letter_details_second_paragraph').tooltip();

对于完整代码,请检查此jsfiddle

如何更改工具提示的CSS

您可以在stackoverflow上找到几种解决方案,例如这样.
tooltip有选项template,默认值是:

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'  

您可以添加CUSTOM_CSS并传递此选项的更新版本,例如:

'<div class="tooltip CUSTOM_CSS" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'  

或者您可以为.tooltip类定义自己的css规则.

实际上有更多的解决方案.这是你的选择,选择其中之一.你知道html结构和tooltip元素类,所以你可以随意操作它.

有关template选项要求的更多信息,请查看此处的官方文档