Bootstrap Tooltip V5.3.2 禁用自动放置

问题描述 投票:0回答:1

我的 bootstrap v5 工具提示有问题 我有一个自定义箭头导致我出现问题。您可以在下面看到。 [![在此处输入图像描述][1]][1]

当工具提示位于顶部时,这样就可以了: [![在此处输入图像描述][2]][2]

自动检测正在移动工具提示,我希望能够知道如何修复我的箭头,这样如果工具提示位于顶部、右侧或底部就可以了,或者禁用工具提示的移动,这样它就可以了离开显示在顶部。我的代码是这样的

 new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
      // turn off sanitize to let inline styles work.
      sanitize: false,
      placement: "top",
      html: true,
      allowedAutoPlacements: ["top", "top", "top", "top"],
    });

我的标记是这样的

 <span
              class="tooltip-icon-holder"
              data-bs-toggle="tooltip"
              :title="getHelpText"
              data-bs-custom-class="disclosure-tooltip"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
                <path
                  d="M16 4.5C9.4 4.5 4 9.9 4 16.5C4 23.1 9.4 28.5 16 28.5C22.6 28.5 28 23.1 28 16.5C28 9.9 22.6 4.5 16 4.5ZM16 25.5C11.05 25.5 7 21.45 7 16.5C7 11.55 11.05 7.5 16 7.5C20.95 7.5 25 11.55 25 16.5C25 21.45 20.95 25.5 16 25.5ZM14.5 15H17.5V22.5H14.5V15ZM17.5 12C17.5 12.8284 16.8284 13.5 16 13.5C15.1716 13.5 14.5 12.8284 14.5 12C14.5 11.1716 15.1716 10.5 16 10.5C16.8284 10.5 17.5 11.1716 17.5 12Z"
                />
              </svg>
            </span>

我查看了文档并认为

allowedAutoPlacements
可以解决我的问题,但我没有尝试过

 new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
      // turn off sanitize to let inline styles work.
      sanitize: false,
      placement: "top",
      html: true,
      allowedAutoPlacements: ["top"],
    });

 new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
      // turn off sanitize to let inline styles work.
      sanitize: false,
      placement: "top",
      html: true,
      allowedAutoPlacements: ["top"],
    });

没有任何效果,任何人都知道如何解决我的问题,欢迎任何帮助。 [1]:https://i.sstatic.net/IEw6aXWk.png [2]:https://i.sstatic.net/65osXKoB.png

tooltip bootstrap-5
1个回答
0
投票

看起来这个工作是为了禁用自动翻转

  new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
      // turn off sanitize to let inline styles work.
      sanitize: false,
      placement: "top",
      html: true,
      fallbackPlacements: ["top", "top", "top", "top"],
      customClass: "disclosure-tooltip",
    });
© www.soinside.com 2019 - 2024. All rights reserved.