我编写了这个插件,但在尝试定位工具提示以使其完全位于父容器上方的中心时遇到问题。我目前只是计算它所在的父容器的宽度,并通过获取它的 left
位置来找出它的位置,但它总是不完全居中。
有什么想法吗?
(function($) {
var toolTip = {
init: function() {
this.each(function() {
var $that = $(this);
// our boolean object to check if it already exists on the page
var $toolSpan = $('<div class="tooltip"><span class="tooltip_arrow"></span></div>');
var preloadImages = function() {
var tempImage = new Image();
tempImage.src = 'http://i.imgur.com/K5ynr.png';
tempImage = null;
};
preloadImages();
$that.mouseover(function() {
var $altText = $that.attr('alt');
var $parentWidth = $that.parent().width();
var $parentPos = $that.parent().position();
var $parentPosY = $parentPos.top;
var $parentPosX = $parentPos.left;
$that.parent().after($toolSpan);
$toolSpan.prepend($altText);
$that.parent().next($toolSpan).css('top', $parentPosY - 30).css('left', $parentPosX).fadeIn();
var $toolSpanWidth = $that.parent().outerWidth();
$that.parent().next('.tooltip').children('.tooltip_arrow').css('left', $toolSpanWidth / 2).fadeIn();
}).mouseout(function() {
$that.parent().next($toolSpan).text('').hide().remove();
});
});
} /* end init */
};
$.fn.toolTip = toolTip.init;
})(jQuery);
最佳答案
关于javascript - 始终将我的 jQuery 工具提示放置在父容器的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9801419/