I tried to change the tooltip placement dynamically but it does not work.
<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>
And for js:
//Initiall tooltip for all elements
$("[title!='']").tooltip();
$("#changeBtn").click(function () {
//Change tooltip placment
$("#sample").tooltip({placement : 'left'}).tooltip('show');
})
/
I found a good answer at Change Twitter Bootstrap Tooltip content on click which shows how to change tooltip text dynamically by using tooltip('fixTitle')
method. But could not find something for placement.
I tried to change the tooltip placement dynamically but it does not work.
<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>
And for js:
//Initiall tooltip for all elements
$("[title!='']").tooltip();
$("#changeBtn").click(function () {
//Change tooltip placment
$("#sample").tooltip({placement : 'left'}).tooltip('show');
})
http://jsfiddle/znvv9ar5/
I found a good answer at Change Twitter Bootstrap Tooltip content on click which shows how to change tooltip text dynamically by using tooltip('fixTitle')
method. But could not find something for placement.
3 Answers
Reset to default 8In Bootstrap 2.x, the answer is:
$('#sample').data('tooltip').options.placement = 'right';
However, from Bootstrap 3, all Bootstrap data is namespaced with bs:
$('#sample').data('bs.tooltip').options.placement = 'right';
Code:
$("#changeBtn").click(function () {
$('#sample').data('tooltip').options.placement = 'left';
$("#sample").tooltip('show');
});
Play it here
Try using "destroy" on the tooltip and bind it again
$("#sample").tooltip("destroy").tooltip({placement : 'left'}).tooltip('show');
Although I do not like using !important it does help to cheat a little in this case.
.tooltip {
left: 12px!important;
}
http://jsfiddle/znvv9ar5/1/ as a result.
You can apply this CSS with the on click.
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744141092a4560210.html
评论列表(0条)