jquery將內容錨定到某個點

我有一個在我的網站上的鏈接列表，當用戶點擊一個然後我顯示一個進一步的選項toolip，鏈接顯示爲90x60圖像，我想要的工具提示顯示將自己錨定到已被點擊的鏈接/圖像的左上角如何實現這一點，下面是我目前的實現。jquery將內容錨定到某個點

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

任何幫助將不勝感激。

來源

2011-04-01 sea_1987

沒有爲已經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; }

來源

2011-04-01 09:25:53 Deele

使用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-02 05:24:23

jquery將內容錨定到某個點

回答

相關問題