em-popover

em-popover is an Angular library that provides a set of customizable popovers, including default, user, description, and company popovers. It is designed to integrate seamlessly with Angular projects and provide a flexible way to display additional information in a popover format.

em-popover Installation

To install the em-popover library, use the following command: npm i [email protected]

Usage

Importing Modules and Directives- In your Angular component, import the necessary directives from the em-popover library: import { TooltipDirective, UsertooltipDirective, DescriptionTooltipDirective, CompanytooltipDirective } from 'em-popover';

Default Popover Configuration

HTML Configuration

Typescript Configuration

import { AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core'; import { HeaderComponent } from '../layouts/header/header.component'; import { FooterComponent } from '../layouts/footer/footer.component'; import { InnerPageComponent } from '../../../projects/my-lib/src/public-api'; import { TooltipDirective } from 'em-popover';

@Component({ selector: 'app-inner-page.html', standalone: true, imports: [HeaderComponent, FooterComponent, InnerPageComponent, DefaultPopoverComponent, UserPopoverComponent, DescriptionPopoverComponent, CompanyPopoverComponent, TooltipDirective, DescriptionTooltipDirective,UsertooltipDirective,CompanytooltipDirective], templateUrl: './inner-page.html.component.html', styleUrl: './inner-page.html.component.css', schemas: [CUSTOM_ELEMENTS_SCHEMA] })

export class InnerPageHtmlComponent implements AfterViewInit {

popoverconfig: any = { id: 'popoverContent', title: 'Popover Title1', content: 'This is the content of the popover 1' };

private options: PopoverOptions = { placement: 'bottom', triggerType: 'hover', offset: 10, onHide: () => {
}, onShow: () => {
} };

ngAfterViewInit() { // Adding a timeout to ensure DOM elements are fully loaded setTimeout(() => { this.initializePopovers('popoverButton', 'popoverContent'); this.initializePopovers('popoverButton3', 'popover-description'); }, 0); }

initializePopovers(buttonId: string, contentId: string) { const $targetEl = document.getElementById(contentId); const $triggerEl = document.getElementById(buttonId); if ($targetEl && $triggerEl) { const popover: PopoverInterface = new Popover($targetEl, $triggerEl, this.options);
} }

Description Popover Configuration

HTML Configuration

Type script Configuration

@Component({ selector: 'app-description-page', standalone: true, imports: [DescriptionTooltipDirective], templateUrl: './description-page.component.html', styleUrls: ['./description-page.component.css'], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) descriptionpopoverconfig: any = { id: 'popover-description', contentSections: [ { title: 'Activity growth - Incremental', content: 'Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.' }, { title: 'Calculation', content: 'For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.' }, { title: 'Additional Information', content: 'This section can be used to add more content dynamically.' }, { title: 'klkklj', content: 'This section can be used to add more content dynamically.' }, { title: 'alan', content: 'This section can be used to add more content dynamically.' }, { title: '', content: 'This section can be used to add more content dynamically.' }, ], readMoreText: 'Learn more about this topic', readMoreLink: '/portfolio', showReadMore:false };

User Popover Configuration

HTML Configuration

<button id="popoverButton4" libUsertooltip [libUsertooltip]="userpopoverconfig" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> User profile

Type script Configuration

@Component({ selector: 'app-user-page', standalone: true, imports: [UsertooltipDirective], templateUrl: './user-page.component.html', styleUrls: ['./user-page.component.css'], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class UserPageComponent { userpopoverconfig: any = { id: 'popover-user-profile', name: 'Ram', lastname: 'jeseleos', address1: 'Open-source contributor. Building ', address2: 'flowbite.com', content1: 'Following', content2: 'Followers'

}; }

Company Popover Configuration

HTML Configuration

<button id="popoverButton5" libCompanytooltip [libCompanytooltip]="companypopoverconfig" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Company profile

Typescript Configuration

@Component({ selector: 'app-company-page', standalone: true, imports: [CompanytooltipDirective], templateUrl: './company-page.component.html', styleUrls: ['./company-page.component.css'], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class CompanyPageComponent { companypopoverconfig: any ={ name:'Tech company', content1:'Open-source library of Tailwind CSS components and Figma design system.', content2:'4,567,346 people like this including 5 of your friends' }; }