jquery - マウスの左側にツールチップを表示

Question

Web サイトに簡単なツールチップを実装しようとしています。カーソルの右側にツールチップを表示して正常に動作しますが、今は同じ効果をカーソルの左側にのみ配置しようとしています。どうすればこれを達成できますか?

ここに私のコードがあります: http://jsfiddle.net/3r5aq/

おそらく初歩的な質問ですが、自分ではこれを理解できないようです。

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;

このようにして、リンクがページの左側にある場合、ツールチップは表示領域の外にはみ出ません。

デモ

Answer 3

$(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
                    });
                });
        });
});​

Answer 4

ツールチップのサイズに応じて x の値を変更するだけで、左に移動するように変更できます。

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