Trigger

Low-level popup trigger used by overlays.

Basic Usage

vue

<template>
  <bp-space style="width: 100%" justify="space-between">
    <bp-trigger position="top">
      <bp-button>Popup top</bp-button>
      <template #content>
        <div class="demo">
          <span>Top popup content</span>
        </div>
      </template>
    </bp-trigger>

    <bp-trigger position="bottom">
      <bp-button>Popup bottom</bp-button>
      <template #content>
        <div class="demo">
          <span>Bottom popup content</span>
        </div>
      </template>
    </bp-trigger>
  </bp-space>
</template>

<style scoped>
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 120px;
  height: 60px;
  padding: 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Position

Supports 12 placements: top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, upper-left, upper-right, low-left, low-right.

vue

<template>
  <div class="position-grid">
    <div class="row">
      <bp-trigger position="top-left">
        <bp-button size="small">Top Left</bp-button>
        <template #content><div class="popup">top-left</div></template>
      </bp-trigger>
      <bp-trigger position="top">
        <bp-button size="small">Top</bp-button>
        <template #content><div class="popup">top</div></template>
      </bp-trigger>
      <bp-trigger position="top-right">
        <bp-button size="small">Top Right</bp-button>
        <template #content><div class="popup">top-right</div></template>
      </bp-trigger>
    </div>
    <div class="row">
      <bp-trigger position="left">
        <bp-button size="small">Left</bp-button>
        <template #content><div class="popup">left</div></template>
      </bp-trigger>
      <bp-trigger position="right">
        <bp-button size="small">Right</bp-button>
        <template #content><div class="popup">right</div></template>
      </bp-trigger>
    </div>
    <div class="row">
      <bp-trigger position="bottom-left">
        <bp-button size="small">Bottom Left</bp-button>
        <template #content><div class="popup">bottom-left</div></template>
      </bp-trigger>
      <bp-trigger position="bottom">
        <bp-button size="small">Bottom</bp-button>
        <template #content><div class="popup">bottom</div></template>
      </bp-trigger>
      <bp-trigger position="bottom-right">
        <bp-button size="small">Bottom Right</bp-button>
        <template #content><div class="popup">bottom-right</div></template>
      </bp-trigger>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.position-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 0;

  .row {
    display: flex;
    gap: 12px;
  }
}

.popup {
  width: 120px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Trigger Type

trigger supports click and hover.

vue

<template>
  <bp-space :size="16">
    <bp-trigger trigger="click">
      <bp-button>Click trigger</bp-button>
      <template #content><div class="popup">Click trigger content</div></template>
    </bp-trigger>
    <bp-trigger trigger="hover">
      <bp-button>Hover trigger</bp-button>
      <template #content><div class="popup">Hover trigger content</div></template>
    </bp-trigger>
  </bp-space>
</template>

<style lang="scss" scoped>
.popup {
  width: 140px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Delay

Control timing with open-delay and close-delay.

vue

<template>
  <bp-space :size="16">
    <bp-trigger trigger="hover" :open-delay="300">
      <bp-button>Open after 300ms delay</bp-button>
      <template #content><div class="popup">Delayed open</div></template>
    </bp-trigger>
    <bp-trigger trigger="hover" :close-delay="500">
      <bp-button>Close after 500ms delay</bp-button>
      <template #content><div class="popup">Delayed close</div></template>
    </bp-trigger>
  </bp-space>
</template>

<style lang="scss" scoped>
.popup {
  width: 150px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Arrow

Toggle the arrow with show-arrow.

vue

<template>
  <bp-space :size="16">
    <bp-trigger show-arrow>
      <bp-button>With arrow</bp-button>
      <template #content><div class="popup">Show arrow pointing to the trigger</div></template>
    </bp-trigger>
    <bp-trigger>
      <bp-button>No arrow</bp-button>
      <template #content><div class="popup">No arrow by default</div></template>
    </bp-trigger>
  </bp-space>
</template>

<style lang="scss" scoped>
.popup {
  width: 180px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Follow Scroll

Keep aligned while scrolling with update-at-scroll.

vue

<template>
  <div :style="{ width: '100%', height: '140px', overflowY: 'scroll' }">
    <div :style="{ height: '300px', background: '#fafafa' }">
      <bp-trigger update-at-scroll>
        <bp-button type="plain">Popup inside scroll container</bp-button>
        <template #content>
          <div class="demo">
            <span>Follow position while scrolling</span>
          </div>
        </template>
      </bp-trigger>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 180px;
  height: 100px;
  padding: 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Trigger Props

v-model	Controls popup visibility	Boolean	-	-
trigger	Trigger	TriggerType	click	-
position	Popup position; supports 12 placements	TriggerPosition	bottom	-
popup-offset	Offset between popup and trigger	Number	-	-
popup-translate	Popup translate offset [x, y]	Array	[0, 0]	-
auto-fit-width	Whether popup matches trigger width	Boolean	-	-
transition	Popup transition name	String	fade	-
click-outside	Whether clicking outside closes the popup	Boolean	true	-
disabled	Whether trigger is disabled	Boolean	-	-
hide-trigger	Whether to hide the trigger element	Boolean	-	-
update-at-scroll	Whether to update popup position on scroll	Boolean	-	-
scroll-to-close	Whether to close popup on scroll	Boolean	-	-
auto-fix-position	Whether to auto-fit popup position to the viewport	Boolean	true	-
scroll-to-close-time	Delay before closing on scroll (ms)	Number	400	-
throttle-time	Throttle for resize/scroll events (ms)	Number	20	-
open-delay	Hover open delay (ms)	Number	-	-
close-delay	Hover close delay (ms)	Number	100	-
boundary-padding	Minimum margin from viewport edges	Number	8	-
show-arrow	Whether to show an arrow pointing to the trigger	Boolean	-	-
get-popup-container	Custom popup mount container	Function	-	-

Trigger Events

update:modelValue	Triggered when popup visibility changes	visible: boolean	-
popupVisible	Triggered when popup shows or hides	visible: boolean	-
positionChange	Triggered when popup position changes	{ position, top, left, width }	-

Trigger Slots

default	Element that triggers the popup	-	-
content	Popup content	-	-

Trigger ​

Basic Usage ​

Position ​

Trigger Type ​

Delay ​

Arrow ​

Follow Scroll ​

Trigger Props ​

Trigger Events ​

Trigger Slots ​