javascript - 工具提示未正确显示

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 上方，无论它的高度是多少。

这是一个 fiddle : 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;
}