Tip Tooltip

A text tip popover that appears on mouse hover, replacing the system title tooltip. The default slot of the tooltip should contain a single DOM element or component.

Basic Usage

Simply use the default slot.

Hover over this text to show the tooltip

<template>
  <b-tooltip content="Tooltip hover text">
    <span>Hover over this text to show the tooltip</span>
  </b-tooltip>
</template>

Multiple Positions

Use placement to set different positions.

<template>
  <div class="demo-tooltip">
    <div class="top">
      <b-tooltip content="Top Left text" placement="top-start">
        <b-button>Top Left</b-button>
        &nbsp;&nbsp;
      </b-tooltip>
      <b-tooltip content="Top Center text" placement="top">
        <b-button>Top</b-button>
        &nbsp;&nbsp;
      </b-tooltip>
      <b-tooltip content="Top Right text" placement="top-end">
        <b-button>Top Right</b-button>
      </b-tooltip>
    </div>
    <div class="center">
      <div class="center-left">
        <b-tooltip content="Left Top text" placement="left-start">
          <b-button>Left Top</b-button>
        </b-tooltip>
        <br />
        <br />
        <b-tooltip content="Left Center text" placement="left">
          <b-button>Left</b-button>
        </b-tooltip>
        <br />
        <br />
        <b-tooltip content="Left Bottom text" placement="left-end">
          <b-button>Left Bottom</b-button>
        </b-tooltip>
      </div>
      <div class="center-right">
        <b-tooltip content="Right Top text" placement="right-start">
          <b-button>Right Top</b-button>
        </b-tooltip>
        <br />
        <br />
        <b-tooltip content="Right Center text" placement="right">
          <b-button>Right</b-button>
        </b-tooltip>
        <br />
        <br />
        <b-tooltip content="Right Bottom text" placement="right-end">
          <b-button>Right Bottom</b-button>
        </b-tooltip>
      </div>
    </div>
    <div class="bottom">
      <b-tooltip content="Bottom Left text" placement="bottom-start">
        <b-button>Bottom Left</b-button>
        &nbsp;&nbsp;
      </b-tooltip>
      <b-tooltip content="Bottom Center text" placement="bottom">
        <b-button>Bottom</b-button>
        &nbsp;&nbsp;
      </b-tooltip>
      <b-tooltip content="Bottom Right text" placement="bottom-end">
        <b-button>Bottom Right</b-button>
      </b-tooltip>
    </div>
  </div>
</template>

<style scoped>
.demo-tooltip {
  .top,
  .bottom {
    text-align: center;
  }
  .center {
    width: 300px;
    margin: 10px auto;
    overflow: hidden;
    .center-left {
      float: left;
    }
    .center-right {
      float: right;
    }
  }
}
</style>

Different Themes

Set theme to apply different style themes.

<template>
  <b-tooltip content="light" theme="light">
    <b-button>light</b-button>
  </b-tooltip>
  <b-tooltip content="Dark" theme="dark">
    <b-button>Dark(default)</b-button>
  </b-tooltip>
</template>

Multi-line & Long Text

Can use slots or long text.

<template>
  <b-tooltip placement="top">
    <b-button>多Row</b-button>
    <template #content>
      <div>这是多Row文字</div>
      <div>这是多Row文字</div>
    </template>
  </b-tooltip>
  <b-tooltip
    placement="top"
    content="我是一段Long text，我是一段Long text，我是一段Long text，我是一段Long text，我是一段Long text，我是一段Long text"
  >
    <b-button>Long text</b-button>
  </b-tooltip>
</template>

Delay & Trigger Timing & Disabled Tip

Can be configured using different parameters.

<template>
  <b-tooltip content="延时一Secondshowhover文字" :open-delay="1000">
    <b-button>延时一Second</b-button>
  </b-tooltip>
  <b-tooltip content="clickshow" trigger="click">
    <b-button>clickshow</b-button>
  </b-tooltip>
  <b-tooltip content="Close和hideWarning" :disabled="disabled">
    <b-button @click="disabled = !disabled">{{ disabled ? 'CloseWarning' : '开启Warning' }}</b-button>
  </b-tooltip>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const disabled = ref(false)
</script>

Props

Parameter	Description	Type	Options	Default
v-model:visible	Whether visible	Boolean	—	false
content	Display content	String	—	—
placement	Position of the tooltip	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	—
disabled	Disable tooltip	Boolean	—	false
transition	Custom transition animation	String	—	fade-in-linear
show-arrow	Whether to show arrow	Boolean	—	true
theme	theme	String	dark or light	dark
open-delay	Delay before showing, in milliseconds	Number	—	0
hide-delay	Delay before hiding, in milliseconds	Number	—	0
offset	Position offset amount	Number	—	12
appendToBody	Append the overlay to body	Boolean	—	true