Tooltip for Angular

The tooltip (cm-angular-tooltip) is a pop-up tip that appears when you hover over an item or click on it.

Installation

Install the npm package.

npm i cm-angular-tooltip

    

app.module.ts

import { TooltipModule } from 'cm-angular-tooltip';
 
@NgModule({
    imports: [ TooltipModule ]
}) 

Angular Compatibility

Usage

Options can be set in the directive tag, so they have the highest priority.

<span tooltip="Tooltip" placement="top" [showDelay]=500>Tooltip on top</span>

You may pass as an object:

<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>

myOptions = {
    'placement': 'left',
    'showDelay': 500
}

You can pass HTML as content :

<span tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>">
  Tooltip with HTML content
</span>

<ng-template #HtmlContent>
  <p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>

<span [tooltip]="HtmlContent" contentType="template">
  Tooltip with template content
</span>

Set default values

Create a file with your settings, for example:

import { TooltipOptions } from 'cm-angular-tooltip';

export const MyDefaultTooltipOptions: TooltipOptions = {
  'show-delay': 500
}

And pass your parameters when importing the module:

import { TooltipModule, TooltipOptions } from 'cm-angular-tooltip';
import { MyDefaultTooltipOptions } from './my-default-options';
 
@NgModule({
    imports: [ 
      TooltipModule.forRoot(MyDefaultTooltipOptions as TooltipOptions)
    ]
})

Properties

Events

When you call events, the delays that are specified in the options in the directive are taken into account. Default delay before tooltip hiding is 300 milliseconds.

Methods

If you specified the directive options, they will be taken into account when calling methods. Including the delay before the appearance and hiding of the tooltip.

License

MIT

Author

• Maram Chandrasekhar Reddy @chandumaram