4+ Angular 2 Tooltips Options

Tooltips are those text popups which when you hover some text or an image they appear over the text in a box usually with some text content, enabling you to give more information to the user on whatever it is your developing. These handy tools now have great browsers support and installing a chrome browser will obviously give you the best user experience as Google are constantly changing and updating their code to make it better.

Anyways, here are some options forĀ Angular 2 Tooltips that you can use you in your angular application.

1. Angular2 Tooltip Directive

Angular2 Tooltip Directive
Angular2 Tooltip Directive

Tooltip provides a text label that is displayed with the user hovers over or longpresses an element. The tooltip can be displayed above, below, left, or right of the element.

Code Demo

2. angular2-tooltip

angular2-tooltip
angular2-tooltip

Customizable npm packaged Angular2 tooltip component. Place attribute tooltip on to any html element which you want to display a tool tip for.

Code

3. ng2 ngx-tooltip

ng2 ngx-tooltip
ng2 ngx-tooltip

Simple 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.

Code

4. Angular 2 Tooltip – Stars

Angular-2-Tooltip-Stars
Angular 2 Tooltip – Stars

Angular 2 tooltip to show additional information related to an element if a user mouse over this element. We can display the tooltip on top right bottom or left of an element. Angular 2 tooltip component is very useful.

Demo

5. Angular Material Tooltip

Angular Material Tooltip
Angular Material Tooltip

The Tooltip’s md-z-index attribute can be used to change the tooltip’s visual level in comparison with the other elements of the application. The Tooltip’s md-direction attribute can be used to dynamically change the direction of the tooltip. The Tooltip’s md-visible attribute can be used to programmatically show/hide itself. The Tooltip’s md-delay attribute can be used to delay the show animation.

Demo

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *