Tooltips are built with tippy.js. Tippies tooltip placement can be customized as shown in the demo below. If no placement is provided, tippy will determine which placement will work the best automatically for you. Tooltip configuration can be done via data-attributes or directly in your javascript code. For more details check out the tippy.js docs.
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px; padding: 50px">
<button id="default-tooltip" class="btn btn-primary">Tooltip button default</button> <button id="top-start-tooltip" class="btn btn-primary">Tooltip button top-start</button> <button id="top-end-tooltip" class="btn btn-primary">Tooltip button top-end</button> <button id="right-tooltip" class="btn btn-primary">Tooltip button right</button> <button id="right-start-tooltip" class="btn btn-primary">Tooltip button right-start</button> <button id="right-end-tooltip" class="btn btn-primary">Tooltip button right-end</button> <button id="bottom-tooltip" class="btn btn-primary">Tooltip button bottom</button> <button id="bottom-start-tooltip" class="btn btn-primary">Tooltip button bottom-start</button> <button id="bottom-end-tooltip" class="btn btn-primary">Tooltip button bottom-end</button> <button id="left-tooltip" class="btn btn-primary">Tooltip button left</button> <button id="left-start-tooltip" class="btn btn-primary">Tooltip button left-start</button> <button id="left-end-tooltip" class="btn btn-primary">Tooltip button left-end</button>
</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
// With the above scripts loaded, you can call `tippy()` with a CSS
// selector and a `content` prop:
tippy("#default-tooltip", {
trigger: "click",
content: "My tooltip!",
})
tippy("#top-start-tooltip", {
trigger: "click",
placement: "top-start",
content: "My Tooltip!",
})
tippy("#top-end-tooltip", {
trigger: "click",
placement: "top-end",
content: "My Tooltip!",
})
tippy("#right-tooltip", {
trigger: "click",
placement: "right",
content: "My Tooltip!",
})
tippy("#right-start-tooltip", {
trigger: "click",
placement: "right-start",
content: "My Tooltip!",
})
tippy("#right-end-tooltip", {
trigger: "click",
placement: "right-end",
content: "My Tooltip!",
})
tippy("#bottom-tooltip", {
trigger: "click",
placement: "bottom",
content: "My Tooltip!",
})
tippy("#bottom-start-tooltip", {
trigger: "click",
placement: "bottom-start",
content: "My Tooltip!",
})
tippy("#bottom-end-tooltip", {
trigger: "click",
placement: "bottom-end",
content: "My Tooltip!",
})
tippy("#left-tooltip", {
trigger: "click",
placement: "left",
content: "My Tooltip!",
})
tippy("#left-start-tooltip", {
trigger: "click",
placement: "left-start",
content: "My Tooltip!",
})
tippy("#left-end-tooltip", {
trigger: "click",
placement: "left-end",
content: "My Tooltip!",
})
</script>