Tooltip
4 Aug 202324 minutes to read
The Ribbon component supports tooltip to show additional information in the Ribbon items. The tooltip appears when the user hovers over a Ribbon item.
Adding Title
You can use the title property to set the tooltip title for each Ribbon item.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize } from "@syncfusion/ej2-react-ribbon";
function App() {
const cutOptions = { title: "Cut" };
const copyOptions = { title: "Copy" };
const pasteOptions = { title: "Paste" };
const painterOptions = { title: "Format Painter" };
const pasteOption = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={copyOptions} allowedSizes={RibbonItemSize.Medium} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize, RibbonTooltipModel } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
function App() {
const cutOptions: RibbonTooltipModel = { title: "Cut" };
const copyOptions: RibbonTooltipModel = { title: "Copy" };
const pasteOptions: RibbonTooltipModel = { title: "Paste" };
const painterOptions: RibbonTooltipModel = { title: "Format Painter" };
const pasteOption: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={copyOptions} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}Adding Content
You can use the content property to set the tooltip content for each Ribbon item.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize } from "@syncfusion/ej2-react-ribbon";
function App() {
const cutOptions = { title: "Cut", content: "Places the selected text or object on the clipboard so that you can paste it somewhere else." };
const copyOptions = { title: "Copy", content: "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere." };
const pasteOptions = { title: "Paste", content: "Insert the clipboard content where the cursor is currently placed." };
const painterOptions = { title: "Format Painter", content: "Copies the formatting style of a selected text or object and applies it to other content within the document." };
const pasteOption = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={copyOptions} allowedSizes={RibbonItemSize.Medium} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize, RibbonTooltipModel } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
function App() {
const cutOptions: RibbonTooltipModel = { title: "Cut", content: "Places the selected text or object on the clipboard so that you can paste it somewhere else." };
const copyOptions: RibbonTooltipModel = { title: "Copy", content: "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere." };
const pasteOptions: RibbonTooltipModel = { title: "Paste", content: "Insert the clipboard content where the cursor is currently placed." };
const painterOptions: RibbonTooltipModel = { title: "Format Painter", content: "Copies the formatting style of a selected text or object and applies it to other content within the document." };
const pasteOption: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={copyOptions} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}Adding Icon
You can use the iconCss property to specify the icons to be displayed in the tooltip.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize } from "@syncfusion/ej2-react-ribbon";
function App() {
const cutOptions = { title: "Cut", content: "Places the selected text or object on the clipboard so that you can paste it somewhere else.", iconCss: "e-icons e-cut" };
const copyOptions = { title: "Copy", content: "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.", iconCss: "e-icons e-copy" };
const pasteOptions = { title: "Paste", content: "Insert the clipboard content where the cursor is currently placed.", iconCss: "e-icons e-paste" };
const painterOptions = { title: "Format Painter", content: "Copies the formatting style of a selected text or object and applies it to other content within the document.", iconCss: "e-icons e-format-painter" };
const pasteOption = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={copyOptions} allowedSizes={RibbonItemSize.Medium} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize, RibbonTooltipModel } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
function App() {
const cutOptions: RibbonTooltipModel = { title: "Cut", content: "Places the selected text or object on the clipboard so that you can paste it somewhere else.", iconCss: "e-icons e-cut" };
const copyOptions: RibbonTooltipModel = { title: "Copy", content: "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.", iconCss: "e-icons e-copy" };
const pasteOptions: RibbonTooltipModel = { title: "Paste", content: "Insert the clipboard content where the cursor is currently placed.", iconCss: "e-icons e-paste" };
const painterOptions: RibbonTooltipModel = { title: "Format Painter", content: "Copies the formatting style of a selected text or object and applies it to other content within the document.", iconCss: "e-icons e-format-painter" };
const pasteOption: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={copyOptions} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}Customization
You can use the cssClass property to customize the appearance of the tooltip with your own custom styles.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize } from "@syncfusion/ej2-react-ribbon";
function App() {
const cutOptions = { title: "Cut", content: "Places the selected text or object on the clipboard so that you can paste it somewhere else.", cssClass: "custom-tooltip" };
const copyOptions = { title: "Copy", content: "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.", cssClass: "custom-tooltip" };
const pasteOptions = { title: "Paste", content: "Insert the clipboard content where the cursor is currently placed.", cssClass: "custom-tooltip" };
const painterOptions = { title: "Format Painter", content: "Copies the formatting style of a selected text or object and applies it to other content within the document.", cssClass: "custom-tooltip" };
const pasteOption = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={copyOptions} allowedSizes={RibbonItemSize.Medium} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize, RibbonTooltipModel } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-react-splitbuttons";
function App() {
const cutOptions: RibbonTooltipModel = { title: "Cut", content: "Places the selected text or object on the clipboard so that you can paste it somewhere else.", cssClass: "custom-tooltip" };
const copyOptions: RibbonTooltipModel = { title: "Copy", content: "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.", cssClass: "custom-tooltip" };
const pasteOptions: RibbonTooltipModel = { title: "Paste", content: "Insert the clipboard content where the cursor is currently placed.", cssClass: "custom-tooltip" };
const painterOptions: RibbonTooltipModel = { title: "Format Painter", content: "Copies the formatting style of a selected text or object and applies it to other content within the document.", cssClass: "custom-tooltip" };
const pasteOption: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={pasteOptions}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOption, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} ribbonTooltipSettings={cutOptions} buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={copyOptions} buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Medium} ribbonTooltipSettings={painterOptions} buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
:root {
--borderColor: rgb(72, 72, 72);
--black: #000000;
}
/* To customize the appearance of the tooltip */
.custom-tooltip.e-ribbon-tooltip.e-popup {
border: 2px solid var(--borderColor);
border-radius: 5px;
background: var(--black);
}
/* To customize the arrow of the tooltip */
.custom-tooltip.e-ribbon-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-top,
.custom-tooltip.e-ribbon-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-bottom {
color: var(--black);;
}
.custom-tooltip.e-ribbon-tooltip .e-arrow-tip-outer.e-tip-top {
border-bottom: 8px solid var(--borderColor);
}
.custom-tooltip.e-ribbon-tooltip .e-arrow-tip-outer.e-tip-bottom {
border-top: 8px solid var(--borderColor);;
}
/* To change the size of the tooltip title */
.custom-tooltip.e-ribbon-tooltip .e-tip-content .e-ribbon-tooltip-title {
font-size: 14px;
}
/* To change the size of the tooltip content */
.custom-tooltip.e-ribbon-tooltip .e-tip-content .e-ribbon-text-container .e-ribbon-tooltip-content {
font-size: 11px;
}