GetTerminus
Popover
Popover component is designed to pop up simple or complex content based on a user trigger.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-popoverCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">popper.js
This popover component is built on top of a 3rd party library called popper.js.
popper.js can be installed by running: yarn add @popperjs/core
popper.js documentation
Usage
Define a popover trigger and popover content:
<button [tsPopoverTrigger]="myPopper">Click me!</button>
<ts-popover #myPopper>
<h1>My Title</h1>
<p>Any HTML can be placed here!</p>
</ts-popover>Position
Defines where the popover is positioned relative to current element:
<button
[tsPopoverTrigger]="myPopper"
[position]="top"
>Click me!</button>
<ts-popover #myPopper>My popover</ts-popover>The default is bottom. For all available positions, please see the popper.js placement docs.
Popover trigger
Popover supports two types of trigger, click and hover.
<button
[tsPopoverTrigger]="myPopper"
popoverTrigger="click"
>Click me!</button>
<ts-popover #myPopper>My popover</ts-popover>The default is click.
Hide on blur
By default, the popover will be closed by clicking outside the popover. If this is not desired, it can be disabled:
<button
[tsPopoverTrigger]="myPopper"
[hideOnBlur]="false"
>Click me!</button>
<ts-popover #myPopper>My popover</ts-popover>It defaults to true.
Open on load
The popover can be defined to open on load:
<button
[tsPopoverTrigger]="myPopper"
[defaultOpened]="true"
>Click me!</button>
<ts-popover #myPopper>My popover</ts-popover>It defaults to false.
Events
| Event | Description | Payload |
|---|---|---|
popoverOnShown |
Fired when popover shows up | popoverInstance |
popoverOnHidden |
Fired when popover hides | popoverInstance |