Question

我正在尝试在我的网站上实施一个简单的工具提示。它工作正常，显示光标右侧的工具提示，但现在我试图获得仅位于光标左侧的相同效果。我如何实现这一目标？

可能是一个新手要问的问题，但我似乎无法自己解决这个问题。

Answer 1

您可以计算工具提示的宽度。显然，如果页面上有多个，则需要更新选择器。

.mousemove(function(e) {
            var mousex = e.pageX - 5 - $(".tooltip").width(); //Get X coordinates
            var mousey = e.pageY;      //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex})
    });

http://jsfiddle.net/3r5aq/18/

Answer 2

我会使用以下内容：

var mousex;
var left = e.pageX - $('.tooltip').width() - 20;
if(left > 0)            
    mousex = left;
else
    mousex = 0;

这样，如果页面上的链接太远，工具提示就不会在可见区域之外运行。

DEMO

Answer 3

您只需根据工具提示的大小修改x值，即可将其更改为左侧：

var mousex = e.pageX - $('.tooltip').width() - 20;

Answer 4

$(document).ready(function() {
        // Tooltip only Text
        $('.nextTooltip').hover(function(){
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('fast');
        }, function() {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX;      //Get X coordinates
                var mousey = e.pageY;      //Get Y coordinates
                $('.tooltip').each(function(ix, item) {
                    $(item).css({
                        top: mousey,
                        left: mousex - $(item).width() - 20
                    });
                });
        });
});

获取鼠标左侧的工具提示

4 个答案: