Tooltip

Show brief helper text on hover or focus.

Basic Usage

<template>
  <bp-tooltip content="Text info" position="bottom">
    <bp-button>Text tip</bp-button>
  </bp-tooltip>
</template>

Position

Place the tooltip with position (top / bottom).

<template>
  <bp-space :size="16">
    <bp-tooltip content="Tooltip top" position="top">
      <bp-button>Top</bp-button>
    </bp-tooltip>
    <bp-tooltip content="Tooltip bottom" position="bottom">
      <bp-button>Bottom</bp-button>
    </bp-tooltip>
  </bp-space>
</template>

Theme

theme supports dark and light.

<template>
  <bp-space :size="16">
    <bp-tooltip content="Dark theme" theme="dark">
      <bp-button>Dark</bp-button>
    </bp-tooltip>
    <bp-tooltip content="Light theme" theme="light">
      <bp-button>Light</bp-button>
    </bp-tooltip>
  </bp-space>
</template>

Trigger

trigger supports hover and click.

<template>
  <bp-space :size="16">
    <bp-tooltip content="Trigger on hover" trigger="hover">
      <bp-button>Hover</bp-button>
    </bp-tooltip>
    <bp-tooltip content="Click to trigger" trigger="click">
      <bp-button>Click</bp-button>
    </bp-tooltip>
  </bp-space>
</template>

Custom Content

Render rich content with the content slot.

<template>
  <bp-tooltip>
    <bp-button>Custom content</bp-button>
    <template #content>
      <div class="custom-content">
        <p style="font-weight: 600">Custom title</p>
        <p>Any content can go here</p>
      </div>
    </template>
  </bp-tooltip>
</template>

<style lang="scss" scoped>
.custom-content {
  min-width: 120px;

  p {
    margin: 0;
    line-height: 1.8;
  }
}
</style>

Tooltip Props

content	Tooltip text	String	-	-
trigger	Trigger	TriggerType	hover	-
theme	Tooltip theme	String	dark	-
position	Popup position	String	top	-

Tooltip Slots

default	Element that triggers the popup	-	-
content	Custom tooltip content	-	-