Контейнер всплывающей подсказки Bootstrap 4 сразу после элемента - PullRequest
Новая
       56

Контейнер всплывающей подсказки Bootstrap 4 сразу после элемента

0 голосов
/ 22 мая 2018

Я бы хотел разместить всплывающие подсказки сразу после тега .form-group.Так что снаружи, а не внутри, как мне удавалось до сих пор.

Кодовый код здесь: https://codepen.io/anon/pen/qYveRq

HTML: 

<div class="form-group input-group-lg d-flex">
    <input class="form-control col-11" type="text" id="input1" placeholder="Focussed text field with floating label">
    <span data-toggle="tooltip" title="This is some tooltip content that appears on hover of question mark. This is some tooltip content that appears on click of question mark." class="help-icon align-self-end ml-auto">?</span>
</div>

JS: 

$('[data-toggle="tooltip"]').each(function () {
    $(this).tooltip({
        trigger: 'click',
        placement: 'bottom',
        html: true,
        container: $(this).parent('.form-group')
    });
});

1 Ответ

0 голосов
/ 23 мая 2018

Вы должны заключить вашу .form-группу в контейнер и изменить «контейнер» в вашей функции

HTML: 

<div class="container">
  <div class="tooltip-wrapper">
    <div class="form-group input-group-lg d-flex">
      <input class="form-control col-11" type="text" id="input1" placeholder="Focussed text field with floating label">
      <span data-toggle="tooltip" title="This is some tooltip content that appears on hover of question mark. This is some tooltip content that appears on click of question mark." class="help-icon align-self-end ml-auto">?</span>
    </div>
  </div>
  <div class="tooltip-wrapper">
    <div class="form-group input-group-lg d-flex">
      <input class="form-control col-11" type="text" id="input1" placeholder="Focussed text field with floating label">
      <span data-toggle="tooltip" title="This is some tooltip content that appears on hover of question mark. This is some tooltip content that appears on click of question mark." class="help-icon align-self-end ml-auto">?</span>
    </div>
  </div>
</div>

JS: 

$('[data-toggle="tooltip"]').each(function () {
  $(this).tooltip({
    trigger: 'click',
    placement: 'bottom',
    html: true,
    container: $(this).closest('.tooltip-wrapper')
  });
});
...