Simple tooltip control for your angular2 applications using bootstrap3.
npm install ngx-tooltipSimple tooltip control for your angular2 applications using bootstrap3. Does not depend of jquery.
If you want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.
1. Install npm module:
npm install ngx-tooltip --save
2. If you are using system.js you may want to add this into map and package config:
``json`
{
"map": {
"ngx-tooltip": "node_modules/ngx-tooltip"
},
"packages": {
"ngx-tooltip": { "main": "index.js", "defaultExtension": "js" }
}
}
Example of simple usage:
`html`
[tooltipDisabled]="false"
[tooltipAnimation]="true"
tooltipPlacement="top">
element on which this tooltip is applied.
Example of usage with dynamic html content:
`html
Very Dynamic Reusable
Tooltip With Html support.
`
* :tooltip="string"
* The message to be shown in the tooltip.[tooltipDisabled]="true|false"
* Indicates if tooltip should be disabled. If tooltip is disabled then it will not be shown. Default is false[tooltipAnimation]="true|false"
* Indicates if all tooltip should be shown with animation or not. Default is true.tooltipPlacement="top|bottom|left|right"
* Indicates where the tooltip should be placed. Default is "bottom".
* :[animation]="true|false"
* Indicates if all tooltip should be shown with animation or not. Default is true.placement="top|bottom|left|right"
* Indicates where the tooltip should be placed. Default is "bottom".
`javascript
import {Component} from "@angular/core";
import {TooltipModule} from "ngx-tooltip";
@Component({
selector: "app",
template:
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)
})
export class App {}
@NgModule({
imports: [
// ...
TooltipModule
],
declarations: [
App
],
bootstrap: [
App
]
})
export class AppModule {
}
Take a look on samples in ./sample for more examples of
usages.