React SelectBox - Add Tooltips to Items

The useItemTextAsTitle property adds a title attribute to each item element with the item's display text. The browser displays this text as a native tooltip when a user hovers over the item.

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        useItemTextAsTitle: true,
        items: [
            { id: 1, name: "Item 1" },
            { id: 2, name: "Item 2" }
        ],
        displayExpr: "name",
        valueExpr: "id"
    });
});
Angular
app.component.html
app.component.ts
<dx-select-box
    [useItemTextAsTitle]="true"
    [items]="items"
    displayExpr="name"
    valueExpr="id">
</dx-select-box>
import { Component } from "@angular/core";
import { DxSelectBoxModule } from "devextreme-angular";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxSelectBoxModule]
})
export class AppComponent {
    items = [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" }
    ];
}
Vue
App.vue
<template>
    <DxSelectBox
        :use-item-text-as-title="true"
        :items="items"
        display-expr="name"
        value-expr="id"
    />
</template>

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

const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
];
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { SelectBox } from 'devextreme-react/select-box';

const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' }
];

export default function App() {
    return (
        <SelectBox
            useItemTextAsTitle={true}
            items={items}
            displayExpr="name"
            valueExpr="id"
        />
    );
}

If you use a custom itemTemplate, add a title attribute to the root element of the template to display the item text as a native browser tooltip:

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        items: [
            { id: 1, name: "John Doe", email: "john@example.com" },
            { id: 2, name: "Jane Smith", email: "jane@example.com" }
        ],
        displayExpr: "name",
        valueExpr: "id",
        itemTemplate: function(itemData) {
            return $("<div>")
                .attr("title", itemData.name)
                .append($("<b>").text(itemData.name))
                .append($("<br>"))
                .append($("<small>").text(itemData.email));
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-select-box
    [items]="items"
    displayExpr="name"
    valueExpr="id"
    itemTemplate="itemTemplate">
    <div *dxTemplate="let item of 'itemTemplate'" [title]="item.name">
        <b>{{ item.name }}</b><br/>
        <small>{{ item.email }}</small>
    </div>
</dx-select-box>
import { Component } from "@angular/core";
import { DxSelectBoxModule } from "devextreme-angular";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxSelectBoxModule]
})
export class AppComponent {
    items = [
        { id: 1, name: "John Doe", email: "john@example.com" },
        { id: 2, name: "Jane Smith", email: "jane@example.com" }
    ];
}
Vue
App.vue
<template>
    <DxSelectBox
        :items="items"
        display-expr="name"
        value-expr="id"
        item-template="item"
    >
        <template #item="{ data }">
            <div :title="data.name">
                <b>{{ data.name }}</b><br/>
                <small>{{ data.email }}</small>
            </div>
        </template>
    </DxSelectBox>
</template>

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

const items = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { SelectBox } from 'devextreme-react/select-box';

const items = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];

function ItemTemplate({ data }: { data: { name: string; email: string } }) {
    return (
        <div title={data.name}>
            <b>{data.name}</b><br/>
            <small>{data.email}</small>
        </div>
    );
}

export default function App() {
    return (
        <SelectBox
            items={items}
            displayExpr="name"
            valueExpr="id"
            itemRender={(data) => <ItemTemplate data={data} />}
        />
    );
}

To display a styled Tooltip with custom content, initialize the Tooltip component inside itemTemplate:

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        items: [
            { id: 1, name: "Item 1", description: "Detailed description 1" },
            { id: 2, name: "Item 2", description: "Detailed description 2" }
        ],
        displayExpr: "name",
        valueExpr: "id",
        itemTemplate: function(itemData, index, element) {
            const itemEl = $("<span>")
                .text(itemData.name)
                .appendTo(element);

            $("<div>").dxTooltip({
                target: itemEl,
                showEvent: "mouseenter",
                hideEvent: "mouseleave",
                contentTemplate: function() {
                    return itemData.description;
                }
            }).appendTo(element);
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-select-box
    [items]="items"
    displayExpr="name"
    valueExpr="id"
    itemTemplate="itemTemplate">
    <div *dxTemplate="let item of 'itemTemplate'">
        <span [id]="'item_' + item.id">{{ item.name }}</span>
        <dx-tooltip
            [target]="'#item_' + item.id"
            showEvent="mouseenter"
            hideEvent="mouseleave">
            <div *dxTemplate="let t of 'content'">{{ item.description }}</div>
        </dx-tooltip>
    </div>
</dx-select-box>
import { Component } from "@angular/core";
import { DxSelectBoxModule, DxTooltipModule } from "devextreme-angular";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    standalone: true,
    imports: [DxSelectBoxModule, DxTooltipModule]
})
export class AppComponent {
    items = [
        { id: 1, name: "Item 1", description: "Detailed description 1" },
        { id: 2, name: "Item 2", description: "Detailed description 2" }
    ];
}
Vue
App.vue
<template>
    <DxSelectBox
        :items="items"
        display-expr="name"
        value-expr="id"
        item-template="item"
    >
        <template #item="{ data }">
            <div>
                <span :id="'item_' + data.id">{{ data.name }}</span>
                <DxTooltip
                    :target="'#item_' + data.id"
                    show-event="mouseenter"
                    hide-event="mouseleave">
                    <template #content>{{ data.description }}</template>
                </DxTooltip>
            </div>
        </template>
    </DxSelectBox>
</template>

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

const items = [
    { id: 1, name: 'Item 1', description: 'Detailed description 1' },
    { id: 2, name: 'Item 2', description: 'Detailed description 2' }
];
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { SelectBox } from 'devextreme-react/select-box';
import { Tooltip } from 'devextreme-react/tooltip';

const items = [
    { id: 1, name: 'Item 1', description: 'Detailed description 1' },
    { id: 2, name: 'Item 2', description: 'Detailed description 2' }
];

function ItemTemplate({ data }: { data: { id: number; name: string; description: string } }) {
    return (
        <div>
            <span id={`item_${data.id}`}>{data.name}</span>
            <Tooltip
                target={`#item_${data.id}`}
                showEvent="mouseenter"
                hideEvent="mouseleave">
                {data.description}
            </Tooltip>
        </div>
    );
}

export default function App() {
    return (
        <SelectBox
            items={items}
            displayExpr="name"
            valueExpr="id"
            itemRender={(data) => <ItemTemplate data={data} />}
        />
    );
}

You can replace "mouseenter" and "mouseleave" with other events such as "click", "dblclick", "focus", or "blur" to control when the Tooltip is displayed.

To display a tooltip only for truncated items, compare element.scrollWidth with element.clientWidth and set the title attribute or display the Tooltip conditionally.

To display HTML content in the tooltip, return an HTML string from contentTemplate in the Tooltip component or from itemTemplate.