Adapted from bharataj88's angular2-tooltip repo. Allows for custom placement in parents and manually enable / disable.
npm install angular2-tooltips --save
then in your app module import the module and add it to the imports in the @NgModule decorator:
import { TooltipModule } from 'angular2-tooltips';
@NgModule({
...
imports: [
TooltipModule
]
...
})
Add the tooltip attribute with a string to display a tooltip over an element on hover.
<p>
One word in this sentence will have a
<span tooltip="hello">tooltip</span>.
</p>
If you don't want to display the tooltip on hover, you can control when it is displayed using the active
attribute. The expression passed to the active attribute should be a boolean value. If it is undefined, the default behaviour for the tooltip will occur (show on hover).
<p>
One word in this sentence will have a
<span tooltip="hello" [active]="expression">tooltip</span>.
</p>
To change the styling you can add a custom class to the tooltip by passing a class name with the tooltipClass
attribute.
<p>
One word in this sentence will have a
<span tooltip="hello" tooltipClass="custom-tooltip">tooltip</span>.
</p>
By default the tooltip is appended to the body element. To append it to a different element, pass a selector using the parentSelector
attribute.
<p>
Only one word in this sentence will have a
<span tooltip="hello" parentSelector=".page">tooltip</span>.
</p>