Tooltip in React Ribbon Component
28 Aug 202524 minutes to read
The Ribbon component supports tooltip to show additional information on Ribbon items. The tooltip appears when the user hovers over a Ribbon item.
Adding Title
The title property can be used 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-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
The content property is used 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-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 tooltip icon
The iconCss property is used to specify an icon for 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-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
The cssClass property allows for customizing the appearance of the tooltip by applying custom CSS 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-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;
}