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

Question

我使用的是Bootstrap v3.3.5和JQuery v1.11.3。

我有一个选择列表，当选择一个值时，我希望工具提示的placement和css类能够改变。

我搜索了Google＆amp;所以并阅读了许多SO帖子，但我做过的许多尝试都失败了。例如，this对我不起作用。

这是我的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();

有关完整代码，请查看此this

如何更改工具提示的CSS

您可以在stackoverflow上找到几种解决方案，例如here 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选项要求的详细信息，请查看官方文档

Answer 2

试试这个

$('.mytooltip').tooltip('destroy');
$('.mytooltip').tooltip({ placement: 'right' });