Popover

Attributes

Parameter	Description	Type	Optional Values	Default
trigger	Trigger mode	String	click/focus/hover/manual	click
title	Title	String	-	-
content	Displayed content; DOM can also be passed through slot	String	-	-
width	Width	String, Number	-	minimum width 150px
placement	Placement	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
disabled	Whether Popover is enabled	Boolean	-	false
value / v-model	Whether visible	Boolean	-	false
offset	Placement offset	Number	-	0
transition	Defines the transition animation	String	-	fade-in-linear
visible-arrow	Whether to show the Tooltip arrow. For more parameters, see Vue-popper	Boolean	-	true
popper-options	Parameters of popper.js	Object	See the popper.js documentation	{ boundariesElement: 'body', gpuAcceleration: false }
popper-class	Adds a class name to popper	String	-	-
open-delay	Display delay when trigger mode is hover, in milliseconds	Number	-	-
close-delay	Hide delay when trigger mode is hover, in milliseconds	number	-	200
tabindex	tabindex of the Popover component	number	-	0

Slot

Parameter	Description
-	Embedded HTML text of Popover
reference	HTML element that triggers Popover display

Events

Event Name	Description	Callback Parameters
show	Triggered when displayed	-
after-enter	Triggered after the show animation ends	-
hide	Triggered when hidden	-
after-leave	Triggered after the hide animation ends	-

Basic Usage

Popover properties are very similar to Tooltip properties. Both are based on Vue-popper, so repeated properties are not explained in detail here; refer to the Tooltip documentation.

<template>
  <fx-popover
    placement="top-start"
    title="Title"
    width="200"
    trigger="hover"
    content="This is some content,This is some content,This is some content,This is some content.">
    <fx-button slot="reference">hover Active</fx-button>
  </fx-popover>

  <fx-popover
    placement="bottom"
    title="Title"
    width="200"
    trigger="click"
    content="This is some content,This is some content,This is some content,This is some content.">
    <fx-button slot="reference">click Active</fx-button>
  </fx-popover>

  <fx-popover
    ref="popover"
    placement="right"
    title="Title"
    width="200"
    trigger="focus"
    content="This is some content,This is some content,This is some content,This is some content.">
  </fx-popover>
  <fx-button v-popover:popover>focus Active</fx-button>

  <fx-popover
    placement="bottom"
    title="Title"
    width="200"
    trigger="manual"
    content="This is some content,This is some content,This is some content,This is some content."
    v-model="visible">
    <fx-button slot="reference" @click="visible = !visible">Manual Activate</fx-button>
  </fx-popover>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>

Nested Information

You can nest various types of information in Popover. The following is an example of a nested table.

<fx-popover
  placement="right"
  width="400"
  trigger="click">
  <fx-table :data="gridData">
    <fx-table-column width="150" property="date" label="Date"></fx-table-column>
    <fx-table-column width="100" property="name" label="Name"></fx-table-column>
    <fx-table-column width="300" property="address" label="Address"></fx-table-column>
  </fx-table>
  <fx-button slot="reference">click Active</fx-button>
</fx-popover>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }]
      };
    }
  };
</script>

Nested Actions

You can also nest actions, which is more lightweight than Dialog:

<fx-popover
  placement="top"
  v-model="visible">
  <div>This is some contentThis is some contentConfirm deletion?</div>
  <div class="actions">
    <fx-button type="primary" size="mini" @click="visible = false">Confirm</fx-button>
    <fx-button size="mini" type="text" @click="visible = false">Cancel</fx-button>
  </div>
  <fx-button slot="reference">Delete</fx-button>
</fx-popover>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    }
  }
</script>