繁体   English   中英

JQuery工具提示位置

[英]JQuery tooltip position

我一直在研究一个简单的工具提示(见下面的小提琴),但我有一些定位问题。 我希望提示显示在中心并位于单击的链接上方。 此时左上角位于鼠标单击处。 我试图通过工具提示的一半来抵消这个位置,但没有成功。

http://jsfiddle.net/Ricco/CBf4C/

查看http://jsfiddle.net/CBf4C/3/上的更改

您需要获取被点击元素的位置( 使用.position() ),使用.outerWidth().outerHeight()获取工具提示的尺寸,然后根据这些来计算..

实际的代码是

$('a[title]').click(function(e) {

    //fadetooltip and display information
    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>');
    tip = $(this).attr('title');
    var tooltip = $('.tooltip'); // store a reference to the tooltip to use it later
    tooltip.fadeTo(300, 0.9).children('.tipBody').html( tip );


    // calculate position of tooltip
    var el = $(this),
        pos = el.position(), // get position of clicked element
        w = el.outerWidth(), // get width of clicked element, to find its center
        newtop = pos.top - tooltip.outerHeight() , // calculate top position of tooltip
        newleft = pos.left + (w/2) - (tooltip.outerWidth()/2); // calculate left position of tooltip

    //set position
    $('.tooltip').css('left', newleft )  ;
    $('.tooltip').css('top',  newtop );

    hideTip = false;
});

http://jsfiddle.net/CBf4C/15/ - 看到这个。

看看我在这里做的改变: http//jsfiddle.net/CBf4C/9/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM