How to implement Angular tooltip?

Angular tooltip can be implemented by different libraries. Tooltip is small pop-up information or message that appears when the user moves the mouse pointer over an element like an image, button, anchor tag, and div, etc. In the tooltip, we can display small information that can contain text, image, anchor, or any HTML element.

In this tutorial, we will disucss some of best Angular tooltip libraries. We’ll demonstrate two example of Angular tooltip using ng2-tooltip-directive and angular bootstrap tooltip component. At last we’ll learn how to style these tooltip component. So let’s get started.

Angular material tooltip

Best Angular tooltip libraries in Angular.


Here we have listed three different ways we can implement Angular tooltip. We can select this library based on your UI library and requirement. If you are using Angular material or ng-bootstrap then you can select the tooltip component from this library only.

Angular Material has a tooltip component and so as in the ng-bootstrap library.

Name of librariesDescription
ng2-tooltip-directiveThis is one of the most downloaded tooltip libraries and has a size of about 320 kB.
matTooltipIf you are using Angular material design UI framework, then it is best to use its own component.
ng-bootstrap tooltipIf you are using bootstrap UI in your project, then bootstrap has a tooltip component built for angular.

Step 1: Setting up and configure Angular tooltip project

Let first create our Angular tooltip project and we have two examples of Angular tooltip. Before starting an angular project you need to install nodejs and Angular CLI in your system.

ng new toolTipApp
cd toolTipApp

Step 2: Angular tooltip example using ng2-tooltip-directive

We’ll demonstrate the Angular tooltip example using third-party library the ng2-tooltip-directive. This library has both free and pro, for most cases free is enough for us to add tooltip in our project.

To demonstrate both the ng2-tooltip-directive and bootstrap tooltip component, let install both packages together.

npm i ng2-tooltip-directive --save
ng add @ng-bootstrap/ng-bootstrap

After installing libraries, we need to TooltipModule in the app.module.ts file, we don’t need to import the ng-bootstrap module, it will add automatically in the app.module.ts file. Let edit the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TooltipModule } from 'ng2-tooltip-directive';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TooltipModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular tooltip example basic

Let first demonstrate a simple example, to know how to use ng2-tooltip-directive in our project. Here is a screenshot of our example.

ng2-tooltip-directive Angular tooltip example

In our component template let add this code.

 <button tooltip="Simple and <b>bold text</b>">Default tooltip</button>

The ng2-tooltip-directive properties

We can control and configure the ng2-tooltip-directive tooltip position, delay, theme, style, and more. Here we have listed only a few properties of this library.

NameDescription
placementThe placement of the tooltip. It can have values top, left, right and bottom. By default position value is top.
showDelayThe delay in milliseconds before showing the tooltip.
hideDelayThe delay in milliseconds before removing the tooltip. By default 300 milliseconds.
themeThe theme of tooltip background and text. It can be light and dark. By default is a dark theme. We can change the background color it using CSS style.
contentTypeThe content type is passed to the tooltip. The string is by default, we can other content types like “html’, “template”
triggerSpecifies how the tooltip is triggered. Control the closing time with “hide-delay”. It can have a value of hover and click. By default hover.

Angular tooltip example on differnt position

As we have discussed there are different positions we can align the tooltip on a button or any HTML element. Let add all different positions on the tooltip.

Angular tooltip direction example

I have seen that sometimes top tooltip positions are not showing, for that we need to add enough width and height for the tooltip button or element. Angular tooltip on hover is the default behavior of this library but we can change to click by using trigger attribute.

<button tooltip="Simple and <b>bold text</b>">Default tooltip</button>
<button tooltip="Tooltip Bottom" [options]="bottomOptions">Bottom</button>
<button tooltip="Tooltip on left" [options]="leftOptions">Left</button>
<button tooltip="Tooltip Rt" placement="top">Top</button>

We can configure the tooltip position from both template and component typescript files by using the options attribute. Let edit the typescript file.

...
export class AppComponent {
  leftOptions = {
    'placement': 'left',
    'showDelay': 500
  };
  
  topOptions = {
    'placement': 'top',
    'showDelay': 500,
  };
  bottomOptions = {
    'placement': 'bottom',
    'showDelay': 500
  }
}

Angular tooltip HTML

The ng2-tooltip-directive allow us to add custom tooltip HTML, that can contain image, button, text, and more. Here is a screenshot of our example.

angular tooltip HTML
  <ng-template #HtmlContent>
    <h3>WWF History</h3>
    <p>
     The World Wide Fund for Nature (WWF) is an international organization 
     working on issues regarding the conservation in 1961.</p>
    <button>Button</button>
  </ng-template>

  <button [tooltip]="$any(HtmlContent)" trigger='click' 
    theme='light' contentType="template">
    Tooltip with template content
  </button>

Here we have also used a few properties like a trigger, light theme, and tooltip to add a reference to add Angular tooltip HTML. In our Angular tooltip HTML, we have used H3, buttons, and paragraph elements. You can add an image or any element of your choice.

Angular tooltip backgrond color

As we have seen that ng2-tooltip-directive, allows us to change tooltip background color either dark or light. We can use tooltipClass properties to change the tooltip background color.

angular material tooltip

We’ll use the previous example, but the only difference is that we change the Angular tooltip background color by using tooltipClass.

  <ng-template #HtmlContent>
    <h3>WWF History</h3>
    <p>The World Wide Fund for Nature (WWF) is an international organization 
       working on issues regarding the conservation in 1961.</p>
      <button>Button</button>
  </ng-template>

  <button [tooltip]="$any(HtmlContent)" trigger='click' 
    tooltipClass='ngTemplateTips' contentType="template">
    Tooltip with template content
  </button>

Here we add ngTemplateTips class on our button, now let edit the tooltip background color to light blue. We need to add tooltip CSS style at global value by adding CSS style in style.scss

.ngTemplateTips {
    background-color: rgb(129, 166, 247) !important;
}

Angular bootstrap tooltip example

Now let demonstrate and learn how to use the Angular bootstrap tooltip component. There are different ways we can add bootstrap to angular, but the ng-bootstrap is best and built specifically for Angular.

Angular bootstrap tooltip example

Angular tooltip on hover is the default behavior of the Angular bootstrap tooltip. Let add our first example of Angular bootstrap tooltip with position attribute and let add this to our template.

<section>
  <h4>Angular bootstrap tooltips placement</h4>
  <button type="button" class="btn btn-outline-secondary mr-2" placement="top"
    ngbTooltip="Tooltip on top">
      Tooltip on top
    </button>
    <button type="button" class="btn btn-outline-secondary mr-2"    
     placement="right"  ngbTooltip="Tooltip on right">
      Tooltip on right
    </button>
    <button type="button" class="btn btn-outline-secondary mr-2" 
     placement="bottom" ngbTooltip="Tooltip on bottom">
      Tooltip on bottom
    </button>
    <button type="button" class="btn btn-outline-secondary mr-2" 
     placement="left" ngbTooltip="Tooltip on left">
      Tooltip on left
    </button>
  </section>

Angular bootstrap tooltip properties

We can control and configure tooltip position, delay, theme, style, and more. Here we have listed only a few properties of this library.

NameDescription
placementThe position of the tooltip. It can have values top, left, right and bottom. By default position value is top.
triggersSpecifies how the bootstrap tooltip is triggered. By default hover.
closeDelayThe delay in milliseconds before closing the tooltip.
tooltipClassBy default tooltip background is dark, we can add a CSS class name to control its style-like background.

Angular tooltip backgrond color or Style of tooltip

We can use tooltipClass attribute to edit the background color of the tooltip. Here is a screenshot of our example.

Angular bootstrap background color using bootstrap tooltip component
 <button type="button" tooltipClass="edupala-tooltip" ngbTooltip="Tooltip on top">
    Tooltip on top
 </button>

Let add the “edupala-tooltip” CSS in our component style file.

.edupala-tooltip .arrow::before{
    border-top-color: red;
}

.edupala-tooltip .tooltip-inner{
    background-color: red;
}

Angular boostrap tooltip open and close delay properties

Let use Angular tooltip openDelay and closeDelay on our bootstrap tooltip component.


Angular bootstrap tooltip delay

We have taken this example directly from ng-bootstrap documentation to demonstrate its example. To learn more on the bootstrap component check its official documentation of ng-bootstrap.

<section>
  <p>
   When using non-manual triggers, you can control the delay to open and close the 
   tooltip through the <code>openDelay</code> and <code>closeDelay</code>  
   properties. Note that the <code>autoClose</code> feature does not use the close 
   delay, it closes the tooltip immediately.
  </p>

  <button type="button" class="btn btn-outline-secondary mr-2" 
    ngbTooltip="You see, I show up after 300ms and disappear after 500ms!" 
    placement="bottom" [openDelay]="300" [closeDelay]="500">
      Hover 300ms here
  </button>
  <button type="button" class="btn btn-outline-secondary mr-2"
      ngbTooltip="You see, I show up after 1s and disappear after 2s!" 
      [openDelay]="1000" [closeDelay]="2000">
      Hover 1s here
    </button>
  </section>

Angular tooltip HTML content in bootstrap tooltip

Let us demonstrate our last example, to add HTML content in a tooltip, and here is a screenshot of this example from the ng-bootstrap tooltip component.

Angular tooltip HTML content
  <section>
    <p>Angular tooltip HTML content</p>

    <ng-template #tipContent>
      <h3>WWF History</h3>
      <p>
        The World Wide Fund for Nature (WWF) is an international organization
        working on issues regarding the conservation in 1961.</p>
    </ng-template>


    <button class="btn btn-warning" tooltipClass="edupala-tooltip" 
      [ngbTooltip]="tipContent" triggers="click">
      Angular tooltip HTML
    </button>
  </section>

Conclusion
We have completed two examples of tooltip libraries, we have learned how to add HTML elements in the tooltip and how to configure its position and background color.

Related posts

Spread the love

Leave a Comment

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

Scroll to Top