All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery Tooltip - Resize and Relocate

To change the size of the Tooltip, specify the height and width properties. Note that the Tooltip's arrow takes its share of the overall size.

jQuery
JavaScript
HTML
$(function() {
    $("#tooltipContainer").dxTooltip({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        height: 70,
        width: 200,
        contentTemplate: function (contentElement) {
            contentElement.append(
                $("<p />").text("Tooltip content")
            )
        }
    });
});
<img id="image" src="https://url/to/an/image" />
<div id="tooltipContainer"></div>
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-tooltip
    target="#image"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend"
    [height]="70"
    [width]="200">
    <div *dxTemplate="let data of 'content'">
        <p>Tooltip content</p>
    </div>
</dx-tooltip>
import { DxTooltipModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTooltipModule
    ],
    // ...
})
Vue
<template>
    <div>
        <img id="image" src="https://url/to/an/image" />
        <DxTooltip
            target="#image"
            show-event="dxhoverstart"
            hide-event="dxhoverend"
            :height="70"
            :width="200">
            <template>
                <p>Tooltip content</p>
            </template>
        </DxTooltip>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTooltip } from 'devextreme-vue/tooltip';

export default {
    components: {
        DxTooltip
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Tooltip } from 'devextreme-react/tooltip';

const renderContent = () => {
    return (
        <p>Tooltip content</p>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="image" src="https://url/to/an/image" />
                <Tooltip
                    target="#image"
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                    contentRender={renderContent}
                    height={70}
                    width={200}
                />
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Tooltip()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Tooltip content</p>
    </text>)
    .Height(70)
    .Width(200)
)
<img id="image" src="https://url/to/an/image" />

If you need to position the Tooltip against a certain side of the target element, set the position property.

jQuery
JavaScript
HTML
$(function() {
    $("#tooltipContainer").dxTooltip({
        target: "#image",
        showEvent: 'dxhoverstart',
        hideEvent: 'dxhoverend',
        position: "top", // or "bottom" | "left" | "right"
        contentTemplate: function (contentElement) {
            contentElement.append(
                $("<p />").text("Tooltip content")
            )
        }
    });
});
<img id="image" src="https://url/to/an/image" />
<div id="tooltipContainer"></div>
Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-tooltip
    target="#image"
    showEvent="dxhoverstart"
    hideEvent="dxhoverend"
    position="top"> <!-- or "bottom" | "left" | "right" -->
    <div *dxTemplate="let data of 'content'">
        <p>Tooltip content</p>
    </div>
</dx-tooltip>
import { DxTooltipModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTooltipModule
    ],
    // ...
})
Vue
<template>
    <div>
        <img id="image" src="https://url/to/an/image" />
        <DxTooltip
            target="#image"
            show-event="dxhoverstart"
            hide-event="dxhoverend"
            position="top"> <!-- or "bottom" | "left" | "right" -->
            <template>
                <p>Tooltip content</p>
            </template>
        </DxTooltip>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTooltip } from 'devextreme-vue/tooltip';

export default {
    components: {
        DxTooltip
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Tooltip } from 'devextreme-react/tooltip';

const renderContent = () => {
    return (
        <p>Tooltip content</p>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="image" src="https://url/to/an/image" />
                <Tooltip
                    target="#image"
                    showEvent="dxhoverstart"
                    hideEvent="dxhoverend"
                    contentRender={renderContent}
                    position="top"/> {/* or "bottom" | "left" | "right" */}
            </div>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Tooltip()
    .Target("#image")
    .ShowEvent("dxhoverstart")
    .HideEvent("dxhoverend")
    .ContentTemplate(@<text>
        <p>Tooltip content</p>
    </text>)
    .Position(Position.Top) // or Position.Bottom | Position.Left | Position.Right
)
<img id="image" src="https://url/to/an/image" />
See Also