I have an issue with my tooltip with bootstrap v5 I have a custom arrow that is causing me an issue. You can see below .
[![enter image description here][1]][1]
when the tooltip is at the top like this it is fine:
[![enter image description here][2]][2]
the auto detection is moving the tooltip around I would like to either be able to know how to fix my arrow so it is fine if the tooltip is on the top vs right or bottom or disable the moving of the tool tip so that it is away displayed at the top. My code is this
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"],
});
my mark up is this
<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>
I looked at the docs and thought allowedAutoPlacements
would fix my issue but it didn’t I tried
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"],
});
and
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"],
});
nothing worked anyone have any idea how to fix my issue any help would be welcome.
[1]: https://i.sstatic.net/IEw6aXWk.png
[2]: https://i.sstatic.net/65osXKoB.png