中心工具提示&在鼠标悬停时保持原位?

时间:2012-02-27 23:27:28

标签: jquery tooltip

在此网站videon

我已经实现了一个工具提示脚本,当它的父图像悬停在其上时会显示不同的图像。虽然工具提示图像不直接居中于父图像上。

任何人都可以提供有关我需要更改的信息,以使工具提示图像显示在其父级的中心吗?

这是支持工具提示的javascript函数...

// Load this script once the document is ready
    $(document).ready(function () {

        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // Set the z-index of the current item, 
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','101')
            .children("div.tooltip")
            .css({'top': y + -400,'left': x + -115,'display':'block'});

        //}).mousemove(function(e) {

            // Calculate the position of the image tooltip          
        //  x = e.pageX - $(this).offset().left;
        //  y = e.pageY - $(this).offset().top;

            // This line causes the tooltip will follow the mouse pointer
        //  $(this).children("div.tooltip").css({'top': y + -400,'left': x + -105});

        }).mouseleave(function() {

            // Reset the z-index and hide the image tooltip 
            $(this).css('z-index','100')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });

    });

1 个答案:

答案 0 :(得分:0)

请勿在计算中使用鼠标事件位置。拇指偏移()。左边加1/2它的宽度将是中心