jquery 将内容锚定到某个点

发布于 2024-10-29 04:33:00 字数 645 浏览 9 评论 0原文

我的网站上有一个链接列表，当用户单击一个链接时，我会显示一个带有一些其他选项的工具栏，这些链接显示为 90x60 图像，我希望显示的工具提示将其自身锚定在顶部已单击的链接/图像的左角如何实现此目的，下面是我当前的实现。

$('#wrapper #content ul li a').click(function(e) {
    e.preventDefault();
    $('#tooltip').remove();
    var url = $(this).attr('href');
    $.ajax({
        type: "POST",
        url: url,
        data: "",
          success: function(html){
           var popup = html;
           $('#content').append(popup);
           $('#tooltip').css({
             position: "absolute",
             top: e.pageY - 200,
             left: e.pageX - 10
           });
          }
    });
});

任何帮助将不胜感激。

原文

I have a a list of links on my website, that when then user clicks on one then I display a toolip with some futher options, the links are display as 90x60 image, I am wanting the tooltip that is display to anchor itself on to the top left hand corner of the link/image that has been clicked how can achieve this, below is my current implementation.

$('#wrapper #content ul li a').click(function(e) {
    e.preventDefault();
    $('#tooltip').remove();
    var url = $(this).attr('href');
    $.ajax({
        type: "POST",
        url: url,
        data: "",
          success: function(html){
           var popup = html;
           $('#content').append(popup);
           $('#tooltip').css({
             position: "absolute",
             top: e.pageY - 200,
             left: e.pageX - 10
           });
          }
    });
});

Any help would be greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

時窥 2024-11-05 04:33:00

已经有 jquery 插件了： http://bassistance.de/jquery-plugins/ jquery-plugin-tooltip/

或者您可以编写一些简单的 jQ 脚本：

（HTML）

<div class="tooltipped box"></div>
<div class="tooltipped box"></div>

（JS）

$(document).ready(function() {
    $('.tooltipped').click(function(){
        $('#tooltip').remove();
        $('body').append('<div id="tooltip" class="tooltip">This is tooltip</div>');
        var p = $(this).position();
        $('#tooltip').css({top: p.top, left: p.left+$(this).width()});
    });
});

（CSS）

.box { border: 1px solid green; width: 90px; height: 60px; }
.tooltip { border: 1px solid red; width: 50px; height: 50px; position: absolute; }

There is jquery plugin for that already: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

There are more http://visionwidget.com/inspiration/web/495-jquery-tooltip-plugins.html

Or you could just write some easy jQ script:

(HTML)

<div class="tooltipped box"></div>
<div class="tooltipped box"></div>

(JS)

$(document).ready(function() {
    $('.tooltipped').click(function(){
        $('#tooltip').remove();
        $('body').append('<div id="tooltip" class="tooltip">This is tooltip</div>');
        var p = $(this).position();
        $('#tooltip').css({top: p.top, left: p.left+$(this).width()});
    });
});

(CSS)

.box { border: 1px solid green; width: 90px; height: 60px; }
.tooltip { border: 1px solid red; width: 50px; height: 50px; position: absolute; }

回复收藏 0 原文

笑，眼淚并存 2024-11-05 04:33:00

使用 qTip。

   $(document).ready(function() {


           $("#qtip").qtip({
            content: 'ToolTip',
            style: {
                name: 'red'
            },
            show: 'mousedown',
            hide: 'mouseout',
            position: {
                target: 'mouse',
                adjust: {
                    mouse: true,
                    x: -180,
                    y: -30,
                }
            }
        });


});

更新：这是我的JsFiddle

Use qTip.

   $(document).ready(function() {


           $("#qtip").qtip({
            content: 'ToolTip',
            style: {
                name: 'red'
            },
            show: 'mousedown',
            hide: 'mouseout',
            position: {
                target: 'mouse',
                adjust: {
                    mouse: true,
                    x: -180,
                    y: -30,
                }
            }
        });


});

Update : Here is my JsFiddle

回复收藏 0 原文

~没有更多了~