Overview of IntegralUI PopOver

IntegralUI PopOver is a native web component for Angular, React and Vue that displays custom HTML content over specified element. Provides functionality that allows you to add custom content, displayed at specified position over page, with initial delay and you can set how much time will remain active.

In this article, you will find general information about the PopOver component, including its properties, events and methods that you can use.

By clicking inside the element space, the PopOver will appear at position specified in the control panel. The example uses a simple template that contains some text and Ok button, you can modify it and add any custom HTML elements or other Angular components in it.

In this example, there is a control panel where you can set different properties of PopOver component. You can choose the initial delay before popover is shown, how long it will remain visible, position at which will appear and whether it is enabled or not.

How to Use IntegralUI PopOver in Angular, React and Vue

To use the PopOver component you need to do the following:

• In app template place the popover component using the iuiPopOver attribute name
• Set values for different properties available
• Handle the events in your code

• JavaScript
• Angular
• React
• Vue

@ViewChild('application', {read: ViewContainerRef, static: false}) applicationRef: ViewContainerRef;

public popoverSettings: any = {
    activation: 'manual',
    appRef: null,
    autoPopDelay: 3000,
    closeButton: true,
    enabled: true,
    header: true,
    initialDelay: 100,
    position: 'right',
    showMarker: true,
    title: 'PopOver Title'
}

public isPopoverActive: boolean = false;

ngAfterViewInit(){
    this.popoverSettings.appRef = this.applicationRef;
}

onClose(){
    this.isPopoverActive = false;
}
                                    

<div class="ppo-ovw-panel" [iuiPopOver]="popoverSettings" [popOverShow]="isPopoverActive" (click)="toggle($event)" (popOverClosed)="onClose()">
    <span>Touch or click the left mouse button here to show a popover.</span>
    <ng-template let-obj [iuiTemplate]="{ type: 'popover' }">
        <!-- Place PopOver Content Here -->
    </ng-template>
</div>
                                    

This component inherits from the Tooltip component.

You can attach this component to any HTML element or other web component. The position of the pop over is based on the element relative position.

If activation is set to 'manual', the popup will remain active until it's closed by changing the popOverShow property to false. If popOverShow property is not specified, then the popover will appear on mouse enter.

In this example, the PopOver shows some text with OK button. The template content is set like this:

• JavaScript
• Angular
• React
• Vue

btnOk(){
    this.isPopoverActive = false;

    alert("Ok button is clicked!");
}
                                    

<div class="ppo-ovw-panel" [iuiPopOver]="popoverSettings" [popOverShow]="isPopoverActive" (click)="toggle($event)" (popOverClosed)="onClose()">
    <span>Touch or click the left mouse button here to show a popover.</span>
    <ng-template let-obj [iuiTemplate]="{ type: 'popover' }">
        <div class="popover-content">
            <div>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.</div>
            <button (click)="btnOk()">Ok</button>
        </div>
    </ng-template>
</div>
                                    

IntegralUI PopOver - Properties, Events and Methods

Supported Properties

You can use the following properties to change the appearance and behavior of the Breadcrumb component:

• activation - specifies whether the popup is activated manually or automatically
• appRef - holds a reference to application view
• autoPopDelay - specifies the time in milliseconds for PopOver to remain visible
• closeButton - determines whether the close button is visible in the header
• enabled - determines whether the PopOver is enabled or disabled
• header - determines whether the popover has a header
• initialDelay - specifies the time in milliseconds prior PopOver is shown
• position - determines where the PopOver will appear: above, below, left or right side of the target element or at mouse position
• showMarker - when true, an arrow marker will be displayed for the PopOver window
• title - a text displayed in the header

Using the above properties, you can customize the PopOver component in a way best suited for your application.

Supported Events

Here is a list of available events:

• popOverClosed - occurs when pop over is closed

The popOverClosed event is fired when:

• close button from the header is clicked
• if activation is manual, the popover closes after activation timer expires
• if the popover is closed manually

Supported Methods

The following public methods are available:

• closePopOver - closes the pop over
• openPopOver - opens the pop over at specified position

Here is how to open the PopOver manually from code:

• JavaScript
• Angular
• React
• Vue

// Import the PopOver directive
import { IntegralUIPopOver } from './integralui/directives/integralui.popover';

// . . . 

// Get a reference to the PopOver component, using the variable 'popover' set in HTML
@ViewChild('popover', { read: IntegralUIPopOver, static: false }) popRef: IntegralUIPopOver;

open(){
    // Change the position settings to 'mouse' so that pop over will appear at specified position
    this.popRef.settings.position = 'mouse';

    // Open the pop over using the openPopOver method
    this.popRef.openPopOver({ x: 200, y: 100 });
}


                                    

<div class="ppo-ovw-panel" [iuiPopOver]="popoverSettings" [popOverShow]="isPopoverActive" (click)="toggle($event)" (popOverClosed)="onClose()" #popover>

<!-- . . . -->

<button (click)="open()">Open</button>
                                    

How to Customize the PopOver Appearance

The content of the PopOver component is fully customizable. You can add any custom HTML elements or other web components to it and arrange them in custom layouts. All CSS settings to the content template are set on your side.

There are few CSS classes that govern the overall component appearance, that is mostly foe the component frame and header. Other than that, you need to provide your own CSS classes for the content.

Using the component properties, you can determine the time after which the content will appear, at which position, how much time will remain visible etc.

Conclusion

IntegralUI PopOver is a web component that you can use in Angular, React and Vue. You can use the component to display custom HTML content over specified element. The position and activity duration is customizable. Using different properties and events and by providing your own CSS classes, you can change the popover appearance and behavior that is best for your applications.

The PopOver component is part of IntegralUI Web.