@teamhive/ngx-tooltip v0.3.15

NgxTooltip

Built on top of Tippy.js

Install

npm i @teamhive/ngx-tooltip

Getting Started

example.module.ts

⋮
import { NgModule } from '@angular/core';
import { TooltipModule, TooltipOptions } from '@teamhive/ngx-tooltip';

@NgModule({
    ⋮
    imports: [
        TooltipModule.forRoot({
            // custom defaults go here e.g.
            placement: 'top',
            arrow: 'true',
            arrowType: 'sharp',
            allowHTML: true,
            maxWidth: 200
        } as TooltipOptions)
    ]
    ⋮
})
export class ExampleModule { }

Usage

Basic

example.component.html

<div ngxTooltip tooltipContent="Lorem ipsum dolor…"> … </div>

HTML Content

⚠️   you should almost certainly santitize any html you didn't make yourself!

example.component.ts

import { TooltipContent } from '@teamhive/ngx-tooltip';
⋮
tooltipElement: TooltipContent;
⋮
ngOnInit() {
    this.tooltipElement = document.getElementById('tooltip-template');
    ⋮
}
⋮

example.component.html

<div ngxTooltip [tooltipAllowHtml]="true" tooltipContent="<span> … </span>"> … </div>

<!-- or -->

<span id="tooltip-template"> … </span>
<div ngxTooltip [tooltipAllowHtml]="true" [tooltipContent]="templateElement"> … </div>

<!-- or, best yet (Yay for template reference variables!!!!) -->

<span #tooltipTemplate> … </span>
<div ngxTooltip [tooltipAllowHtml]="true" [tooltipContent]="tooltipTemplate"> … </div>

Specify Options

example.component.ts

import { TooltipOptions } from '@teamhive/ngx-tooltip';
⋮
tooltipOptions: TooltipOptions = {
    placement: 'top',
    arrow: 'true',
    arrowType: 'sharp',
    allowHTML: true,
    content: '<span …> … </span>'
};
⋮

example.component.html

<div [ngxTooltip]="{content: 'Lorem ipsum dolor…', maxWidth: 200 …}"> … </div>

<!-- or -->

<div [ngxTooltip]="tooltipOptions"> … </div>

TooltipService

example.component.ts

import { TooltipService } from '@teamhive/ngx-tooltip';
⋮
constructor(tooltipService: TooltipService) {}
⋮
forceCloseAll() {
    tooltipService.hideAll();
}
⋮

Properties

Some commonly used options are made available through element properties. see full list of options.

Additional properties

cannot be set via Element properties

Methods

Some commonly used options are made available through element properties.

Theming

@teamhive/ngx-tooltip makes use of css variables for theming.

When you pass a theme name via TooltipModule.forRoot{}, ngxTooltip, or tooltipTheme - a css class is attached to the tooltip elements so they can be targeted for styling.

CSS Variables

example.scss

// the package styles.css file must be imported to use css variables
@import "@teamhive/ngx-tooltip/assets/styles/styles.css";

// custom styling should be placed in class selector of `${customThemeName}-theme`
.currant-theme {
    --tooltip-color: #9df2a4;               // seafoam
    --tooltip-arrow-color: #463E53;         // blackcurrant
    --tooltip-background-color: #463E53;    // blackcurrant
    --tooltip-font-size: 16px;
    --tooltip-font-weight: 500;
    --tooltip-font-style: normal;
    --tooltip-font-family: "Helvetica Neue", Helvetica, sans-serif;
    --tooltip-box-shadow: 2px 2px 5px grey;
    --tooltip-border-radius: 5px;
    --tooltip-text-align: center;
    --tooltip-padding: 5px;
}

example.component.html

<div ngxTooltip tooltipTheme="currant" tooltipContent="blackcurrant & seafoam"…>
    custom theme
</div>

for advanced theming, see the Tippy.js theming docs.

All Options

options taken from tippy.js docs

Contributors

| :---: |Michael Riess|