A tooltip widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxTooltip widget displays a tooltip for the specified element. The target element is specified via the target configuration option, which takes on a DOM node, jQuery element or CSS selector.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxTooltip widget using the Knockout approach.

<div data-bind="dxTooltip:{ visible: visible, target: '.button' }">
    <p>The tooltip text.</p>
<div class="button" data-bind="dxButton: { text: 'Click me' }, event: { mouseover: toggleTooltip, mouseout: toggleTooltip }"></div>

Declare an observable Boolean variable and assign it to the visible configuration option to control widget visibility.

var visible = ko.observable(false),
toggleTooltip = function() {

If you create the widget using the jQuery approach, provided that it contains one or more widgets inside, the inner widget instances should be created within a function passed to the contentReadyAction option of the dxTooltip widget.

<div id="button"></div>
<div id="tooltip">
    <p>The button supports the following types.</p>
    <div id="typeList"></div>
    target: "#button",
    contentReadyAction: function() {
            dataSource: ['normal', 'default', 'back', 'danger', 'success']
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxTooltip widget is related to the Overlays category. So read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Overlays article.

Watch Video

Show Example:


An object defining configuration options for the dxTooltip widget.


This section describes members used to manipulate the widget.


This section describes events fired by this component.