工具提示未正確顯示

Question

使用以下JavaScript函數，我設法顯示一個帶有懸停箭頭的靜態工具提示。

$('.tooltip-basic').hover(function() { 
     var title = $(this).attr('title'); 
     $(this).data('title', title).removeAttr('title'); 
     $('<p class="tooltip-basic-message"></p>').text(title).appendTo(this).fadeIn('slow'); 
    }, function() { 
     $(this).attr('title', $(this).data('title')); 
     $('.tooltip-basic-message').remove(); 
    }); 

不過，我奮力定位箭頭的提示下，其DIV上面的提示，無論有什麼樣的高度位置。

這裏是一個小提琴：http://jsfiddle.net/xA8LS/3/

Answer 1

首先，所述abbr元件應該是一個block水平元件。

.tooltip-basic { 
    position: relative; 
    display:block; 
} 

其次，:before僞元素應該絕對定位 - 不是相對的。

.tooltip-basic-message:before { 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #285A98; 
    content:""; 
    display:block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom:-6px; 
    left: 5px; 
    z-index: 1; 
} 

除此之外，一些定位需要改變。

Updated Example

---

此外，如果你想要的箭頭中心：

Alternative Example

.tooltip-basic-message:before { 
    left: 50%; 
    margin-left: -2.5px; 
}