3

私は自分のウェブサイトにリンクのリストを持っています。ユーザーがリンクをクリックすると、いくつかのオプションを含むツールリップが表示されます。リンクは 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
           });
          }
    });
});

どんな助けでも大歓迎です。

4

2 に答える 2

2

そのための jquery プラグインがすでにあります: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

もっとありますhttp://visionwidget.com/inspiration/web/495-jquery-tooltip-plugins.html

または、簡単な 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; }
于 2011-04-01T09:25:53.933 に答える
0

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です

于 2011-04-02T05:24:23.280 に答える