Question

我有两个按钮，单击一个，它改变了左侧Bootstrap工具提示的方向，然后另一个则相反。我只能设法使用工具提示而不是其他工具来使用元素的第一个实例。我错过了每个功能，但我根本无法理解。

DEMO：http://jsbin.com/veqac/1/edit?html,js,output

问：获取工具提示的所有实例，而不仅仅是第一个实例。

$(document).ready(function() {

  var tippy = $('.wrapper [data-hover="tooltip"]');

      tippy.tooltip({
         trigger: 'hover',
         container: 'body'
      });

  $('.change-dir-left').click(function (e) {
   tippy.data('bs.tooltip').options.placement = 'left';
   e.preventDefault();
  });

  $('.change-dir-right').click(function (e) {
   tippy.data('bs.tooltip').options.placement = 'right';
   e.preventDefault();
  });

});

HTML

<a href="#" class="btn btn-block btn-default change-dir-left">Change Tooltip Direction Left </a>
<a href="#" class="btn btn-block btn-default change-dir-right">Change Tooltip Direction Right </a>
<hr>
<div class="wrapper">
   <button type="button" class="btn center-block btn-default" data-hover="tooltip" title="Me">Tooltip</button> <br>  <button type="button" class="btn center-block btn-default" data-hover="tooltip" title="Me">Tooltip</button>
</div>

Answer 1

试试这个

$('.change-dir-left').click(function (e) {
    tippy.each(function(){
        $(this).data('bs.tooltip').options.placement = 'left';
    });
    e.preventDefault();
});

$('.change-dir-right').click(function (e) {
    tippy.each(function(){
        $(this).data('bs.tooltip').options.placement = 'right';
    });
    e.preventDefault();
});

Answer 2

试试这个

$(document).ready(function() {

  var tippy = $('.wrapper [data-hover="tooltip"]');

      tippy.tooltip({
         trigger: 'hover',
         container: 'body'
      });

  $('.change-dir-left').click(function (e) {
    $('.a').each(function(i)
    {
 $(this).data('bs.tooltip').options.placement = 'left';
    });
   e.preventDefault();
  });

  $('.change-dir-right').click(function (e) {
     $('.a').each(function(i)
    {
   $(this).data('bs.tooltip').options.placement = 'right';
     });
   e.preventDefault();
  });

});

我添加了一个课程a

<div class="wrapper">
    <button type="button" class="a btn center-block btn-default" data-hover="tooltip" title="Me">Tooltip</button> <br>  <button type="button" class="a btn center-block btn-default" data-hover="tooltip" title="Me">Tooltip</button>
  </div>

对于每个工具提示更改位置，单击另一个按钮

问：获取工具提示的所有实例，而不仅仅是第一个实例。

2 个答案: