如何禁用 b-tooltip 自动定位 Bootstrap-Vue

Question

我有一个工具提示，我希望它始终位于顶部和中间，即使顶部没有足够的 space，它也不会在调整大小时改变。我希望工具提示溢出到外面。但是当没有足够的时候它会自己改变位置 space

Link 沙盒：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>

现在是这样的：

但我想要的是：

看起来它与 fallback-placement 有关，但我不知道如何禁用它。

谢谢大家！

Answer 1

试试下面的代码。 Sandbox Example

方法一：需要加上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>

方法二：

<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>

如何禁用 b-tooltip 自动定位 Bootstrap-Vue

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

vue.js

bootstrap-4

bootstrap-vue