如何禁用Bootstrap Vue中Tooltip的悬停触发功能？

Got it! The problem you're facing is that BootstrapVue's <b-tooltip> component automatically triggers on hover (and focus) by default. To make it only open/close when you click your toggle button, you just need to switch it to manual trigger mode.

Here's how to modify your code:

1. Add the trigger="manual" prop to your <b-tooltip> component. This disables all automatic trigger events (hover, focus, click), so the tooltip's visibility will be 100% controlled by your show data property.
2. Keep your existing toggle button logic intact—it will still handle flipping the show value to toggle the tooltip.

Modified Full Code #

<template>
  <div class="text-center">
    <div>
      <b-button id="tooltip-button-1" variant="primary">I have a tooltip</b-button>
    </div>
    <div class="mt-3">
      <b-button @click="show = !show">Toggle Tooltip</b-button>
    </div>
    <!-- Added trigger="manual" to disable automatic hover/focus triggers -->
    <b-tooltip :show.sync="show" target="tooltip-button-1" placement="top" trigger="manual">
      Hello <strong>World!</strong>
    </b-tooltip>
  </div>
</template>
<script>
export default {
  data() { // Fixed: data should be a function in Vue components to avoid shared state
    return {
      show: true
    }
  }
}
</script>

Quick Notes: #

• I fixed a tiny issue in your original script: in Vue single-file components, data should always be a function that returns an object (this prevents unintended shared state between multiple instances of the component).
• With trigger="manual", the tooltip will no longer pop up when you hover over the primary button—only when you click the "Toggle Tooltip" button will it show or hide.

内容的提问来源于stack exchange，提问作者Ivan Zavalinich