Tooltip
Tooltip
参考 bootstrap
.tooltip-error、.tooltip-warning、.tooltip-success、.tooltip-info
<a href="#" title="message" class="my-tooltip-link tooltip-error">
Show Tooltip
</a>
或者
$('.my-tooltip-link').tooltip();
$('.my-tooltip-link').tooltip({
'container': 'body',
'template': '<div class="tooltip tooltip-error"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});
Notes
最好使用 'container': 'body'
<div class="tab-pane">
<a href="#" title="message which may be very long" class="my-tooltip-link tooltip-error">
Show Tooltip
</a>
</div>
$('.my-tooltip-link').tooltip({
'container': 'body'
});
加到其他元素
//find "pie chart tooltip example" in mustache/app/views/assets/scripts/index.js
var tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
//and when necessary
tooltip.show().children(0).text(tip);//dynamically change its text
tooltip.css({top: y, left: x});
tooltip.hide();
或者
/find "range slider tooltip example" in mustache/app/views/assets/scripts/form-elements.js
if(! ui.handle.firstChild ) {
$(ui.handle).
append("tooltip right in' style='display:none; left:16px; top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
}
$(ui.handle.firstChild).show().children().eq(1).text(val);//update (.tooltip-inner)'s text and show it
提示位置
//placement parameter can be a function
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
var $source = $(source);
var $parent = $source.closest('div.container_selector')//or maybe 'body' > $parent = $('body')
//get containers offset and width
var off1 = $parent.offset();
var w1 = $parent.width();
//get elements offset
var off2 = $source.offset();
//this is approximate and optional, you can change it
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
return 'left';
}