ngx-custom-tooltip

This library was generated with Angular CLI version 9.1.13.

About

Simple and customizable tooltip/pop-up component for Angular projects.
It can be used as a tooltip (it closes when you click outside of it), or as a pop-up with a close button.
It has a ng-content tag, so you can place all kinds of html elements inside them.

Get Started

Step 1: Install ngx-virtual-scroller

npm install ngx-custom-tooltip

Step 2: Import NgxCustomTooltipModule module into your app.module.ts

....
import { NgxCustomTooltipModule } from 'ngx-custom-tooltip';
....
@NgModule({
    ...
    imports: [
        ....
        NgxCustomTooltipModule
    ],
    ....
})
export class AppModule { }

Step 3: Wrap ngx-custom-tooltip tag around your elements in the app.component.html file

<button #target>Open</button>
<ngx-custom-tooltip [target]="target" 
                    (closeEmitter)="handleClose($event)">
    <p>This is a tooltip message!</p>
</ngx-custom-tooltip>

Options

Attribute	Type	Default value	Description
bgColor	string	'#ffffff'	background-color property for the tooltip.
borderColor	string	'#d3d3d3'	border-color property for the tooltip.
borderRadius	string	'4px'	border-radious property for the tooltip. Accepts css syntax.
closeButton	boolean	false	Indicates if the tooltip has a close button. If false, it closes when you click outside of it.
closeButtonImage	string	undefined	Image path for close button.
closeButtonMargin	string	'20px'	Separation of the close button from the border. By default it is placed in the upper right corner. Accepts css syntax.
closeButtonSize	string	'20px'	height and widht properties for the close button. Accepts css syntax.
displacement	number	0	Arbitrary offset of the tooltip from its target. It is ignored if a center type position is chosen. Example: topCenter.
floatingSize	number	3	Move the tooltip away from its target.
maxHeight	string	'max-content'	Maximum height, after that, a vertical scroll appears. Accepts css syntax.
maxWidth	string	'max-content'	Maximum width, after that, a horizontal scroll appears. Accepts css syntax.
minHeight	string	'auto'	Minimun height for the tooltip. Accepts css syntax.
minWidth	string	'auto'	Minimun width for the tooltip. Accepts css syntax.
padding	string	'8px'	padding property for the tooltip. Accepts css syntax.
popUpPosition	string	'topCenter'	The position of the tooltip. Valid values: ['topStart', 'topCenter', 'topEnd', 'bottomStart', 'bottomCenter', 'bottomEnd', 'leftStart', 'leftCenter', 'leftEnd', 'rightStart', 'rightCenter', 'rightEnd'].
target	HTMLElement	undefined	The HTMLEelement that activates the tooltip. If closeButton is false the target is excluded for the clickout event that close the button.
triangleBgColor	string	undefined	background-color property for the triangle. If not provided, bgColor is used.
(closeEmitter)	boolean		Emit false when tooltip is closed.