How to disable b-tooltip auto position placement Bootstrap-Vue

Question

I have a tooltip, and I want it to always be at the top and center, it won't change when resizing even though there's not enough space at the top. I want the tooltip to overflow to the outside. But it changes position by itself when there is not enough space

Link sanbox: https://codesandbox.io/s/tooltip-bootstrap-vue-8vjtl?file=/src/App.vue

   <div style="background: #ccc">
       <div id="tooltip_1" style="background: #fff"><div>
       <b-tooltip :target="tooltip_1" placement="top" fallback-placement="flip"   triggers="click blur">
         Text demodemo
       </b-tooltip>
    <div>

Right now it's like this:

But what I want:

Looks like it's related to fallback-placement but I don't know how to turn it disable.

Thanks everyone!

Answer 1

Try the below code. Sandbox Example

Approach 1: Need to add boundary="document"

<template>
  <div id="app">
    <div class="wrap">
      <div class="box">
        <div
          class="item"
          id="tooltip-target-1"
          :style="{ width: sizeWidth + 'px' }"
        >
          Click me
          <b-tooltip target="tooltip-target-1" triggers="click" placement="top"
          boundary="document">
            <span class="bold">I want it</span><br />
            <span>break the line</span><br />
            <span class="yellow">and custom style</span>
          </b-tooltip>
        </div>
        <button @click="zooOut">Zoom</button>
      </div>
    </div>
  </div>
</template>

---

Approach 2:

<template>
  <div id="app">
    <div class="wrap">
      <div class="box">
        <div
          class="item"
          v-b-tooltip.click.top.html="toolTipData"
          id="tooltip-target-1"
        >
          Click me
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      toolTipData: {
        title: `<span class="bold">I want it</span><br /><span>break the line</span><br /><span class="yellow">and custom style</span>`,
      },
    };
  },
};
</script>