Popover

The Popover component is a generic popover component for displaying things like filters and menus in an element over the page.

Using a Popover

To open a Popover, add something like a button to the action slot and the popover content to the default slot. You can then use popover.toggle() to open the popover.

<template>
  <ci-popover>
    <template #action="popover">
      <ci-button @click="popover.toggle()">
        Open Popover
      </ci-button>
    </template>
    Popover content.
  </ci-popover>
</template>

Slot scope

Popover uses scoped slots under the hood to pass attributes to the slot. You can use these attributes to do all kinds of things with your popover.

Attribute	Type	Description
open	function	Opens the popover
toggle	function	Opens & closes the popover
update	function	Updates the popover position
close	function	Closes the popover
shown	Boolean	Whether the popover is shown or not

Closing a Popover

Popovers will close automatically when someone clicks outside of them, but you can use the close() or toggle() functions to close it manually.

In this demo, we open a popover with open() and then close() it after 5 seconds.

<template>
  <ci-popover>
    <template #action="popover">
      <ci-button @click="showPopover(popover)">
        Open Popover
      </ci-button>
    </template>
    <div>
      This will close in {{ time }}s.
    </div>
  </ci-popover>
</template>
<script>
export default {
  data() {
    return {
      time: 5,
    }
  },
  methods: {
    showPopover(popover) {
      popover.open()
      setInterval(() => {
        this.time -= 1;
        if (this.time === 0) {
          popover.close()
        }
      }, 1000);
    }
  }
}
</script>

In this demo, we use a click event inside the popover to close it.

<template>
  <ci-popover>
    <template #action="popover">
      <ci-button @click="popover.open">
        Open Popover
      </ci-button>
    </template>
    <template #default="popover">
      <ci-button variant="danger" @click="popover.close">
        Close Popover
      </ci-button>
    </template>
  </ci-popover>
</template>

Variant

Use the variant prop to change the style of the popover.

<template>
  <DemoGrid>
    <ci-popover variant="subtle">
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          Subtle Popover
        </ci-button>
      </template>
      Popover content.
    </ci-popover>
    <ci-popover variant="emphasis">
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          Emphasis Popover
        </ci-button>
      </template>
      Popover content.
    </ci-popover>
  </DemoGrid>
</template>

Padding

Use the padding prop to adjust the padding on the Popover.

<template>
  <DemoGrid>
    <ci-popover
      v-for="option in paddingOptions"
      :key="option"
      :padding="option"
    >
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          {{ option }} padding
        </ci-button>
      </template>
      Popover content.
    </ci-popover>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      paddingOptions: ['flush', '2xs', 'xs', 'sm', 'md']
    }
  }
}
</script>

Placement

The placement prop one of the placement options for popper.js. Click here for the full list of options.

<template>
  <DemoGrid>
    <ci-popover
      v-for="option in placementOptions"
      :key="option"
      :placement="option"
    >
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          {{ option }}
        </ci-button>
      </template>
      Popover content.
    </ci-popover>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      placementOptions: [
        'right-start',
        'right',
        'right-end',
        'bottom-end',
        'bottom',
        'bottom-start',
        'left-end',
        'left',
        'left-start',
        'top-start',
        'top',
        'top-end'
      ]
    }
  }
}
</script>

Strategy

Use the strategy prop to set the positioning method for the popover. By default this is absolute but it can be changed to fixed which can be useful for cases when you want the tooltip to not be constrained by a parent's overflow rules. Please see the Popper.js docs (opens new window) for more information.

Customized Popovers

The options prop allows you to fully customize the options of popper.js. Please see the Popper.js docs (opens new window) for a full list of options.

<template>
  <ci-popover :options="customOptions">
    <template #action="popover">
      <ci-button @click="popover.toggle()">
        Open Popover
      </ci-button>
    </template>
    Popover content.
  </ci-popover>
</template>
<script>
export default {
  data() {
    return {
      customOptions: {
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [20, 20],
            },
          },
        ],
      }
    }
  }
}
</script>

Offsets

Use the offset prop to apply the offset on the Popover once opened. Please see the Popper.js docs (opens new window)

<template>
  <DemoGrid>
    <ci-popover
      v-for="option in offsets"
      :offset="option"
      placement="right"
    >
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          {{ option }} offset
        </ci-button>
      </template>
      Popover content.
    </ci-popover>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      offsets: [[20,20],[0,0],[100,100]]
    }
  }
}
</script>

Transitions

Use the transition-speed prop to apply the transition speed on the Popover.

<template>
  <DemoGrid>
    <ci-popover
      v-for="option in transitionOptions"
      :key="option"
      :transition-speed="option"
      placement="right"
    >
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          {{ option }} transition
        </ci-button>
      </template>
      Popover content.
    </ci-popover>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      transitionOptions: ['none', 'fast', 'slow']
    }
  }
}
</script>

Events

Popover have two events @close and @open, fired when the Popover is opened or closed.

<template>
  <div>
    <ci-popover
      @open="openCount += 1"
      @close="closeCount += 1"
    >
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          Open Popover
        </ci-button>
      </template>
      Some popover
    </ci-popover>
    <br><br>
    I've been opened {{ openCount }} time(s) and closed {{ closeCount }} time(s)!
  </div>
</template>

<script>
export default {
  data() {
    return {
      openCount: 0,
      closeCount: 0,
    }
  }
}
</script>