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;
}

Answer 2

以我的经验在某些情况下，由于响应速度，工具提示将无法正确显示，因此，如果该提示是表内项目，则应使用

     $('[data-toggle="tooltip"]').tooltip({
            container: 'table',
    });

工具提示未正确显示

2 个答案: