Динамическое размещение всплывающей подсказки Bootstrap

Я использую всплывающую подсказку Bootstrap через селектор атрибутов. т. е. любой элемент с атрибутом title должен отображаться как всплывающая подсказка:

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

Однако по некоторым причинам и для некоторых элементов я хотел бы изменить размещение. Первоначально я не использовал атрибут data-placement для элементов, но для элементов, у которых я хочу, чтобы его всплывающая подсказка имела другое расположение, отличное от значения по умолчанию, я предоставил им атрибут data-placement и изменил приведенный выше код, чтобы он выглядел следующим образом:

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

Этот код должен установить размещение равным bottom для элементов, не имеющих атрибута data-placement, и установить его равным его значению для элементов, имеющих этот атрибут.

Однако код работает не так, как ожидалось, он устанавливает размещение = дно для каждого элемента, даже, например, для тех, у которых есть data-placement='right


jquery twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-tooltip
person SaidbakR    schedule 02.11.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Функция обратного вызова placement получает 2 аргумента: первый является аргументом всплывающей подсказки, а второй — исходным элементом.
Вы можете использовать этот элемент для получения искомых данных:

$('[title]').tooltip({
  placement: function(t_el, el) {
    return (typeof $(el).data('placement') === 'undefined') ? 'bottom' :  $(el).data('placement');
  }, trigger: 'hover'
});
<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>

person Dekel    schedule 02.11.2016
comment
Функция получает 2 аргумента в качестве параметров. Первый — это элемент, который создается для отображения всплывающей подсказки (в моем примере — контейнер div черной всплывающей подсказки), поэтому я назвал его t_el. Второй — это элемент, для которого нам нужно создать всплывающую подсказку — <button>. - person Dekel; 02.11.2016

arrow_upward
0
arrow_downward

Я полагаю, это потому, что $(this) ссылается не на всплывающую подсказку, а на ваш родительский селектор, скорее всего, document.

Попробуй это:

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