Bootstrap 4 个工具提示容器紧跟在元素之后

Question

我想将出现的工具提示放在 .form-group 标签之后。所以在外面，而不是像我目前所管理的那样在里面。

Codepen 在这里：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')
    });
});

Answer 1

您必须将您的 .form-group 包装在容器中并在您的函数中更改 "container"

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