元素

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包装在容器中并更改＆＃34; container＆＃34;在你的功能

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