FxPopover

Attributes

Parameter	Description	Type	Options	Default
trigger	How the popover is triggered	String	click/focus/hover/manual	click
title	Popover title	String	—	—
content	Popover content, can be replaced with a slot	String	—	—
width	Popover width	String, Number	—	Min-width 150px
placement	Popover 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 disabled	Boolean	—	false
value / v-model	Visibility of Popover	Boolean	—	false
offset	Popover offset	Number	—	0
transition	Transition animation	String	—	fade-in-linear
visible-arrow	Whether to show Tooltip arrow, see Vue-popper (opens new window) for more parameters	Boolean	—	true
popper-options	Parameters for popper.js (opens new window)	Object	Refer to popper.js (opens new window) documentation	{ boundariesElement: 'body', gpuAcceleration: false }
popper-class	Custom class name for popper	String	—	—
open-delay	Delay before showing when trigger is hover, in milliseconds	Number	—	—
close-delay	Delay before hiding when trigger is hover, in milliseconds	Number	—	200
tabindex	tabindex (opens new window) of Popover	Number	—	0

Slot

Name	Description
—	HTML content of Popover
reference	HTML element that triggers Popover

Events

Event Name	Description	Parameters
show	Triggers when Popover shows	—
after-enter	Triggers when show transition completes	—
hide	Triggers when Popover hides	—
after-leave	Triggers when hide transition completes	—

Basic Usage

Popover shares many attributes with Tooltip as both are based on Vue-popper. For duplicate attributes, please refer to Tooltip documentation.

Hover to activate Click to activate Focus to activate Manual activation

The trigger attribute determines how the popover is triggered. Four options are available: hover, click, focus and manual. For the triggering element, you can either use a named slot slot="reference" or a custom directive v-popover referencing the Popover's ref.

<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.">
    <fx-button slot="reference">Hover to activate</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.">
    <fx-button slot="reference">Click to activate</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.">
  </fx-popover>
  <fx-button v-popover:popover>Focus to activate</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."
    v-model="visible">
    <fx-button slot="reference" @click="visible = !visible">Manual activation</fx-button>
  </fx-popover>
</template>

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

Expand Copy Copy

Nested Information

Popover can contain various types of nested information. Below is an example with a nested table.

Click to activate

Using slots instead of content attribute

<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 to activate</fx-button>
</fx-popover>

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

Expand Copy Copy

Nested Operations

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

Are you sure you want to delete this?

Confirm Cancel

Delete

<fx-popover
  placement="top"
  v-model="visible">
  <div>Are you sure you want to delete this?</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>

Expand Copy Copy