Question

我正在通过属性选择器使用Bootstrap工具提示。即任何具有title属性的元素都应该呈现为工具提示：

$('[title]').tooltip({placement: 'bottom', trigger: 'hover'});

但是，出于某些原因和某些元素，我想更改展示位置。最初，我没有使用data-placement属性作为元素，但对于我希望其工具提示具有除默认值之外的diifirent位置的元素，我向它们提供了data-placement属性，并且我将上述代码修改为如下：

$('[title]').tooltip({placement: (typeof $(this).attr('data-placement') === 'undefined')? 'bottom' : $(this).attr('data-placement'), trigger: 'hover'});

对于没有bottom属性的元素，此代码应将展示位置设置为data-placement，而将其设置为等于具有该属性的元素的值。

但是，代码无法按预期工作，它甚至为每个元素设置了placement = bottom，例如，那些具有data-placement='right

Answer 1

placement的回调函数接收2个参数 - 第一个是工具提示参数，第二个是原始元素。
您可以使用此元素来获取您要查找的数据：

＆＃13;

$('[title]').tooltip({
  placement: function(t_el, el) {
    return (typeof $(el).data('placement') === 'undefined') ? 'bottom' :  $(el).data('placement');
  }, trigger: 'hover'
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div style="margin: 35px 55px;">

  <button type="button" class="btn btn-default" data-placement="left" title="Tooltip on left">Tooltip on left</button>

  <button type="button" class="btn btn-default" data-placement="top" title="Tooltip on top">Tooltip on top</button>

  <button type="button" class="btn btn-default" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

  <button type="button" class="btn btn-default" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>

＆＃13;

Answer 2

我认为这是因为$(this)没有引用工具提示，而是您的父选择器，很可能是document。

试试这个：

$('[title]').each(function() {
    $(this).tooltip({
        placement: (typeof $(this).attr('data-placement') === 'undefined') ? 'bottom' : $(this).attr('data-placement'),
        trigger: 'hover'
    });
});

Bootstrap工具提示动态展示位置

2 个答案: