JavaScript/jQuery Gallery - Add Tooltips to Items

Use the onItemRendered event to add a title attribute to each item element after it is rendered. The browser displays this text as a native tooltip when a user hovers over the item.

jQuery
JavaScript
$(function() {
    $("#galleryContainer").dxGallery({
        items: [
            { text: "Item 1", hint: "Description for item 1" },
            { text: "Item 2", hint: "Description for item 2" }
        ],
        onItemRendered: function(e) {
            $(e.itemElement).attr("title", e.itemData.hint);
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-gallery
    [items]="items"
    (onItemRendered)="onItemRendered($event)">
</dx-gallery>
import { Component } from "@angular/core";
import { DxGalleryModule } from "devextreme-angular";
import { ItemRenderedEvent } from "devextreme/ui/gallery";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxGalleryModule]
})
export class AppComponent {
    items = [
        { text: "Item 1", hint: "Description for item 1" },
        { text: "Item 2", hint: "Description for item 2" }
    ];

    onItemRendered(e: ItemRenderedEvent) {
        (e.itemElement as HTMLElement).title = e.itemData.hint;
    }
}
Vue
App.vue
<template>
    <DxGallery
        :items="items"
        @item-rendered="onItemRendered"
    />
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxGallery } from 'devextreme-vue/gallery';
import type { ItemRenderedEvent } from 'devextreme/ui/gallery';

const items = [
    { text: 'Item 1', hint: 'Description for item 1' },
    { text: 'Item 2', hint: 'Description for item 2' }
];

function onItemRendered(e: ItemRenderedEvent) {
    (e.itemElement as HTMLElement).title = e.itemData.hint;
}
</script>
React
App.tsx
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { Gallery } from 'devextreme-react/gallery';
import type { ItemRenderedEvent } from 'devextreme/ui/gallery';

const items = [
    { text: 'Item 1', hint: 'Description for item 1' },
    { text: 'Item 2', hint: 'Description for item 2' }
];

export default function App() {
    const onItemRendered = useCallback((e: ItemRenderedEvent) => {
        (e.itemElement as HTMLElement).title = e.itemData.hint;
    }, []);

    return (
        <Gallery
            items={items}
            onItemRendered={onItemRendered}
        />
    );
}