JavaScript/jQuery Tooltip - Overview
The Tooltip UI component displays a tooltip for a specified element on the page.
The following code creates a simple Tooltip on your page and attaches it to another element (in this example, to an image).
jQuery
HTML
JavaScript
<img id="image" src="https://url/to/an/image" /> <div id="tooltipContainer"></div>
$(function() {
$("#tooltipContainer").dxTooltip({
target: "#image",
showEvent: 'dxhoverstart',
hideEvent: 'dxhoverend',
contentTemplate: function (contentElement) {
contentElement.append(
$("<p />").text("Tooltip content")
)
}
});
});Angular
HTML
TypeScript
<img id="image" src="https://url/to/an/image" />
<dx-tooltip
target="#image"
showEvent="dxhoverstart"
hideEvent="dxhoverend">
<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">
<template #content>
<p>Tooltip content</p>
</template>
</DxTooltip>
</div>
</template>
<script>
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.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}
/>
</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>)
)
<img id="image" src="https://url/to/an/image" />NOTE
The component may affect the page layout when used inside a flex container with other elements. For example, the following parent CSS styles can cause this issue:
CSS
.flex {
display: flex;
justify-content: space-between;
}To avoid changes to the page layout, implement the following CSS styles for the Tooltip container:
CSS
.dx-tooltip {
display: none !important;
}See Also
jQuery
Angular
Vue
React
Feedback