[英]bootstrap tooltip - use jquery to dynamically change css & placement
我正在使用 Bootstrap v3.3.5 和 JQuery v1.11.3 。
I have a select list that when a value is selected, I would like the placement and css class of a tooltip to change.
我搜索了 Google & 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 。 这只是我的第二把小提琴,我不知道如何在引导程序中添加以显示工具提示。
主要问题
您忘记将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
选项要求的更多信息,请查看此处的官方文档
试试这个
$('.mytooltip').tooltip('destroy');
$('.mytooltip').tooltip({ placement: 'right' });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.