[英]I can't change tooltip bootstrap position with jQuery
我无法使用jQuery更改工具提示引导程序的位置。 http://jsfiddle.net/2cast8g8/上的示例
如果我在text1中输入一个较大的值,我的函数ck()需要更改工具提示的位置。
还可以使用jQuery将工具提示的颜色更改为红色吗?
<input type="text" id="text1" name="title" value="" data-toggle="tooltip" data-placement="top"title="this need to be less">
<input type="text" id="text2" name="title" value="" data-toggle="tooltip" data-placement="bottom"title="bigger ">
$('#text1').change(function () {
ck()
});
$('#text2').change(function () {
ck()
});
function ck() {
text1 = document.getElementById("text1").value;
text2 = document.getElementById("text2").value;
if (Number(text1) > Number(text2)) {
$("#text2").attr("data-original-title", "This value need to be bigger than ");
$("#text1").attr("data-placement", "top");
$(function () {
$('#text2').tooltip('hide').tooltip('show');
});
} else {
$("#text2").attr("data-original-title", "bigger");
}
}
$(function () {
$('[data-toggle="tooltip"]').tooltip('show')
})
$('body').tooltip({
placement: function(tip, element) {
//code to calculate the position here, return values: "left", "right", "top", "bottom"
},
selector: '[data-toggle="tooltip"]'
});
Bootstrap工具提示插件具有一个“ placement”选项,该选项控制工具提示的一般位置(顶部,底部,左侧,右侧),但它会计算此函数中的确切位置:
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
您可以重写此函数以提供自己的逻辑(也许通过添加“自定义”放置类型。请注意,除了设置css位置属性外,插件还将位置类型作为类应用于元素。这些类在setContent
函数,因此您必须调整该函数以删除新的自定义展示位置类型类。您可能还需要解决其他问题/注意事项-这不是一个简单的选择,但是是一个有趣的项目,甚至值得提出请求:)
另一种方法是在完成引导插件后简单地移动/覆盖位置。 有一个“显示”事件可用,但是仅在应用了CSS过渡之后才触发,因此可能不适合。
一个例子可能是这样的(未经测试的代码):
$('#text2').on('shown.bs.tooltip', function () {
var left = $(this).css('left');
$(this).css({
left: left + 50
});
})
您可能要看一下jQueryUI工具提示小部件-它具有用于放置工具提示的更多功能(包括添加自定义偏移量)。 http://api.jqueryui.com/tooltip/#option-position
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.