Angular Tooltip - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

Tooltip is a UI component that allows you to display information over a specific element in your application.

This tutorial guides you through the following steps:

  • Add a Tooltip to a page and configure core component settings.
  • Customize Tooltip appearance.

The following live example demonstrates the result:

Each section in this tutorial describes a single configuration step. You can find the complete source code in the following GitHub repository:

View on GitHub

Create and Configure Tooltip

jQuery

Add DevExtreme to your jQuery application and use the code below to create a Tooltip. To display the component, specify a target and define the showEvent or visible property.

index.js
index.html
$(function() {
    $('#tooltip').dxTooltip({
        target: '#target',
        showEvent: 'mouseenter',
    });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="tooltip"></div>
    </body>
</html>
Angular

Add DevExtreme to your Angular application and use the code below to create a Tooltip. To display the component, specify a target and define the showEvent or visible property.

app.component.html
app.module.ts
<dx-tooltip
  target="#target"
  showEvent="mouseenter"
></dx-tooltip>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DxTooltipModule } from 'devextreme-angular/ui/tooltip';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Add DevExtreme to your Vue application and use the code below to create a Tooltip. To display the component, specify a target and define the showEvent or visible property.

App.vue
<script setup lang="ts">
import { DxTooltip } from 'devextreme-vue/tooltip';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

</script>
<template>
    <DxTooltip
        target="#target"
        show-event="mouseenter"
    />
</template>
React

Add DevExtreme to your React application and use the code below to create a Tooltip. To display the component, specify a target and define the showEvent or visible property.

App.tsx
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { Tooltip } from 'devextreme-react/tooltip';

function App(): JSX.Element {
    return (
        <Tooltip
            target="#target"
            showEvent="mouseenter"
        />
    );
}

This example creates three Button components and assigns Tooltips to them. Button ID attributes are specified as Tooltip targets. Additionally, this example configures the hideEvent property for all Tooltips:

jQuery
index.js
index.html
$(function() {
    $('#like').dxButton({
        icon: 'like',
    });

    $('#like-tooltip').dxTooltip({
        target: '#like',
        showEvent: 'mouseenter',
        hideEvent: 'mouseleave',
    });

    $('#trash').dxButton({
        icon: 'trash',
    });

    $('#trash-tooltip').dxTooltip({
        target: '#trash',
        showEvent: 'mouseenter',
        hideEvent: 'mouseleave',
    });

    $('#info').dxButton({
        icon: 'info',
    });

    $('#info-tooltip').dxTooltip({
        target: '#info',
        showEvent: 'mouseenter',
        hideEvent: 'mouseleave',
    });
});
<body class="dx-viewport">
    <div class="main-container">
        <div class="buttons">
            <div id="like"></div>
            <div id="trash"></div>
            <div id="info"></div>
        </div>
        <div class="tooltips">
            <div id="like-tooltip"></div>
            <div id="trash-tooltip"></div>
            <div id="info-tooltip"></div>
        </div>
    </div>
</body>
Angular
app.component.html
app.module.ts
<div class="dx-viewport">
    <div class="buttons">
        <dx-button id="like" icon="like"></dx-button>
        <dx-button id="trash" icon="trash"></dx-button>
        <dx-button id="info" icon="info"></dx-button>
    </div>
    <div class="tooltips">
        <dx-tooltip
            target="#like"
            showEvent="mouseenter"
            hideEvent="mouseleave"
        ></dx-tooltip>
        <dx-tooltip
            target="#trash"
            showEvent="mouseenter"
            hideEvent="mouseleave"
        ></dx-tooltip>
        <dx-tooltip
            target="#info"
            showEvent="mouseenter"
            hideEvent="mouseleave"
        ></dx-tooltip>
    </div>
</div>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DxButtonModule } from 'devextreme-angular/ui/button';
import { DxTooltipModule } from 'devextreme-angular/ui/tooltip';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        DxButtonModule,
        DxTooltipModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxButton } from 'devextreme-vue/button';
import { DxTooltip } from 'devextreme-vue/tooltip';

</script>
<template>
    <div class="dx-viewport">
        <div class="buttons">
            <DxButton
                id="like"
                icon="like"
            />
            <DxButton
                id="trash"
                icon="trash"
            />
            <DxButton
                id="info"
                icon="info"
            />
        </div>
        <div class="tooltips">
            <DxTooltip
                target="#like"
                show-event="mouseenter"
                hide-event="mouseleave"
            />
            <DxTooltip
                target="#trash"
                show-event="mouseenter"
                hide-event="mouseleave"
            />
            <DxTooltip
                target="#info"
                show-event="mouseenter"
                hide-event="mouseleave"
            />
        </div>
    </div>
</template>
React
App.tsx
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { Button } from 'devextreme-react/button';
import { Tooltip } from 'devextreme-react/tooltip';

function App(): JSX.Element {
    return (
        <div className="dx-viewport">
            <div className="buttons">
                <Button
                    id="like"
                    icon="like"
                />
                <Button
                    id="trash"
                    icon="trash"
                />
                <Button
                    id="info"
                    icon="info"
                />
            </div>
            <div className="tooltips">
                <Tooltip
                    target="#like"
                    showEvent="mouseenter"
                    hideEvent="mouseleave"
                />
                <Tooltip
                    target="#trash"
                    showEvent="mouseenter"
                    hideEvent="mouseleave"
                />
                <Tooltip
                    target="#info"
                    showEvent="mouseenter"
                    hideEvent="mouseleave"
                />
            </div>
        </div>
    );
}

Customize Tooltip

jQuery

To customize Tooltip content, specify contentTemplate. If you assign a string to this property, Tooltip displays plain text in its container:

index.js
$(function() {
    $('#like-tooltip').dxTooltip({
        contentTemplate: 'like'
    });

    $('#trash-tooltip').dxTooltip({
        contentTemplate() {
            return $('<div>')
                .addClass('red-tooltip')
                .text('Delete');
        },
    });

    $('#info-tooltip').dxTooltip({
        contentTemplate() {
            return $('<div>')
                .addClass('blue-tooltip')
                .text('Info');
        },
    });
})
Angular

To customize Tooltip content, specify contentTemplate. If you assign a string to this property, Tooltip displays plain text in its container:

app.component.html
<div class="tooltips">
    <dx-tooltip
        contentTemplate="Like"
    ></dx-tooltip>
    <dx-tooltip
        contentTemplate="trashTooltip"
    >
        <div *dxTemplate="let model of 'trashTooltip'">
            <div class="red-tooltip">Delete</div>
        </div>
    </dx-tooltip>
    <dx-tooltip
        contentTemplate="infoTooltip"
    >
        <div *dxTemplate="let model of 'infoTooltip'">
            <div class="blue-tooltip">Info</div>
        </div>
    </dx-tooltip>
</div>
Vue

To customize Tooltip content, specify contentTemplate. If you assign a string to this property, Tooltip displays plain text in its container:

App.vue
<template>
    <div class="tooltips">
        <DxTooltip
            content-template="Like"
        />
        <DxTooltip
            content-template="trashTooltip"
        >
            <template #trashTooltip>
                <div class="red-tooltip">Delete</div>
            </template>
        </DxTooltip>
        <DxTooltip
            content-template="infoTooltip"
        >
            <template #infoTooltip>
                <div class="blue-tooltip">Info</div>
            </template>
        </DxTooltip>
    </div>
</template>
React

To customize Tooltip content, specify contentRender or contentComponent:

App.tsx
function likeRender(): JSX.Element {
    return <div>Like</div>;
}

function trashRender(): JSX.Element {
    return (
        <div className='red-tooltip'>Delete</div>
    );
}

function infoRender(): JSX.Element {
    return (
        <div className='blue-tooltip'>Info</div>
    );
}

function App(): JSX.Element {
    return (
        <div className="tooltips">
            <Tooltip
                contentRender={likeRender}
            />
            <Tooltip
                contentRender={trashRender}
            />
            <Tooltip
                contentRender={infoRender}
            />
        </div>
    )
}

You can use CSS to customize the Tooltip's appearance. The code snippets above assigned CSS classes to all tooltips. This example defines those styles (.red-tooltip and .blue-tooltip):

jQuery
index.css
.dx-overlay-content:has(.blue-tooltip),
.dx-overlay-content:has(.blue-tooltip) .dx-popover-arrow::after {
    background-color: #0f6cbd;
    color: white;
}

.dx-overlay-content:has(.red-tooltip),
.dx-overlay-content:has(.red-tooltip) .dx-popover-arrow::after {
    background-color: #d13438;
    color: white;
}
Angular
app.component.scss
::ng-deep .dx-overlay-content:has(.blue-tooltip),
::ng-deep .dx-overlay-content:has(.blue-tooltip) .dx-popover-arrow::after {
    background-color: #0f6cbd;
    color: white;
}

::ng-deep .dx-overlay-content:has(.red-tooltip),
::ng-deep .dx-overlay-content:has(.red-tooltip) .dx-popover-arrow::after {
    background-color: #d13438;
    color: white;
}
Vue
main.css
.dx-overlay-content:has(.blue-tooltip),
.dx-overlay-content:has(.blue-tooltip) .dx-popover-arrow::after {
    background-color: #0f6cbd;
    color: white;
}

.dx-overlay-content:has(.red-tooltip),
.dx-overlay-content:has(.red-tooltip) .dx-popover-arrow::after {
    background-color: #d13438;
    color: white;
}
React
App.css
.dx-overlay-wrapper > .dx-overlay-content:has(.blue-tooltip),
.dx-overlay-wrapper > .dx-overlay-content:has(.blue-tooltip) .dx-popover-arrow::after {
    background-color: #0f6cbd;
    color: white;
}

.dx-overlay-wrapper > .dx-overlay-content:has(.red-tooltip),
.dx-overlay-wrapper > .dx-overlay-content:has(.red-tooltip) .dx-popover-arrow::after {
    background-color: #d13438;
    color: white;
}
See Also