Popover

When the mouse hovers, focus, or click on a component, a bubble-like card floating layer will pop up. You can manipulate the elements on the card.

Basic usage

Move the mouse in or click to pop up bubbles, which can operate on the elements on the floating layer, and carry complex content and operations.

Trigger

By setting trigger, you can specify different trigger methods.

Popover supports 12 different positions. They are: upper left upper upper right lower left down lower right upper left left lower left upper right right lower right.

<template>
  <div :style="{ position: 'relative', width: '440px', height: '280px' }">
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="tl"
    >
      <tu-button style="position: absolute; top: 0; left: 90px"> tl </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="top"
    >
      <tu-button style="position: absolute; top: 0; left: 180px">
        top
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="tr"
    >
      <tu-button style="position: absolute; top: 0; left: 280px">
        tr
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="bl"
    >
      <tu-button style="position: absolute; top: 240px; left: 80px">
        bl
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="bottom"
    >
      <tu-button style="position: absolute; top: 240px; left: 180px">
        bottom
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="br"
    >
      <tu-button style="position: absolute; top: 240px; left: 280px">
        br
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="lt"
    >
      <tu-button style="position: absolute; top: 60px; left: 10px">
        lt
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="left"
    >
      <tu-button style="position: absolute; top: 120px; left: 10px">
        left
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="lb"
    >
      <tu-button style="position: absolute; top: 180px; left: 10px">
        lb
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="rt"
    >
      <tu-button style="position: absolute; top: 60px; left: 350px">
        rt
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="right"
    >
      <tu-button style="position: absolute; top: 120px; left: 350px">
        right
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="rb"
    >
      <tu-button style="position: absolute; top: 180px; left: 350px">
        rb
      </tu-button>
    </tu-popover>
  </div>
</template>

<style scoped lang="scss">
.tu-button {
  width: 80px;
}
</style>

<template>
  <div :style="{ position: 'relative', width: '440px', height: '280px' }">
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="tl"
    >
      <tu-button style="position: absolute; top: 0; left: 90px"> tl </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="top"
    >
      <tu-button style="position: absolute; top: 0; left: 180px">
        top
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="tr"
    >
      <tu-button style="position: absolute; top: 0; left: 280px">
        tr
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="bl"
    >
      <tu-button style="position: absolute; top: 240px; left: 80px">
        bl
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="bottom"
    >
      <tu-button style="position: absolute; top: 240px; left: 180px">
        bottom
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="br"
    >
      <tu-button style="position: absolute; top: 240px; left: 280px">
        br
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="lt"
    >
      <tu-button style="position: absolute; top: 60px; left: 10px">
        lt
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="left"
    >
      <tu-button style="position: absolute; top: 120px; left: 10px">
        left
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="lb"
    >
      <tu-button style="position: absolute; top: 180px; left: 10px">
        lb
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="rt"
    >
      <tu-button style="position: absolute; top: 60px; left: 350px">
        rt
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="right"
    >
      <tu-button style="position: absolute; top: 120px; left: 350px">
        right
      </tu-button>
    </tu-popover>
    <tu-popover
      title="Popover title"
      content="Here is the text content."
      position="rb"
    >
      <tu-button style="position: absolute; top: 180px; left: 350px">
        rb
      </tu-button>
    </tu-popover>
  </div>
</template>

<style scoped lang="scss">
.tu-button {
  width: 80px;
}
</style>

Sizes

Besides default size, tu-popover component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

Name	Description	Type	Default
popup-visible / v-model	Whether the popover is visible	`Boolean`	-
default-popup-visible	Whether the popover is visible by default (uncontrolled mode)	`Boolean`	false
title	Title of Popover	`String`	-
content	Content of Popover	`String`	-
trigger	Trigger method	`String`	hover
position	Position of Popover	`String`	top
content-class	The class name of the popup content	`ClassName`	-
content-style	The style of the popup content	`CSSProperties`	-
arrow-class	The class name of the popup arrow	`ClassName`	-
arrow-style	The style of the popup arrow	`CSSProperties`	-
popup-container	Mount container for pop-up box	`String` `HTMLElement` `null` `undefined`	-

Name	Description	Type
popup-visible-change	Triggered when the text bubble display status changes	`Function`

Name	Description	Type
title	Title	-
content	Content	-

Basic usage

Trigger

Sizes

Popover API

Popover Attributes

Popover Events

Popover Slots

Popover ​

Basic usage ​

Trigger ​

Popup position ​

Sizes ​

Popover API ​

Popover Attributes ​

Popover Events ​

Popover Slots ​

Popover

Basic usage

Trigger

Popup position

Sizes

Popover API

Popover Attributes

Popover Events

Popover Slots