Tooltip
5 Aug 202323 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 { Ribbon, RibbonItemSize, RibbonItemType, RibbonTabModel } from '@syncfusion/ej2-ribbon';
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: 'Clipboard',
showLauncherIcon: true,
collections: [{
items: [{
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Cut'
},
buttonSettings: {
content: 'Cut',
iconCss: 'e-icons e-cut'
}
}]
}, {
items: [{
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Copy'
},
buttonSettings: {
content: 'Copy',
iconCss: 'e-icons e-copy'
}
}, {
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Paste'
},
buttonSettings: {
content: 'Paste',
iconCss: 'e-icons e-paste'
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>
Adding Content
You can use the content property to set the tooltip content for each Ribbon item.
import { Ribbon, RibbonItemType, RibbonTabModel } from '@syncfusion/ej2-ribbon';
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: 'Clipboard',
showLauncherIcon: true,
collections: [{
items: [{
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Cut',
content: 'Cut selected text or objects'
},
buttonSettings: {
content: 'Cut',
iconCss: 'e-icons e-cut'
}
}]
}, {
items: [{
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Copy',
content: 'Copy selected text or objects'
},
buttonSettings: {
content: 'Copy',
iconCss: 'e-icons e-copy'
}
}, {
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Paste',
content: 'Paste copied or cut content'
},
buttonSettings: {
content: 'Paste',
iconCss: 'e-icons e-paste'
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>
Adding Icon
You can use the iconCss property to specify the icons to be displayed in the tooltip.
import { Ribbon, RibbonItemType, RibbonTabModel } from '@syncfusion/ej2-ribbon';
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: 'Clipboard',
showLauncherIcon: true,
collections: [{
items: [{
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Cut',
content: 'Cut selected text or objects',
iconCss: 'e-icons e-cut'
},
buttonSettings: {
content: 'Cut',
iconCss: 'e-icons e-cut'
}
}]
}, {
items: [{
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Copy',
content: 'Copy selected text or objects',
iconCss: 'e-icons e-copy'
},
buttonSettings: {
content: 'Copy',
iconCss: 'e-icons e-copy'
}
}, {
type: RibbonItemType.Button,
ribbonTooltipSettings: {
title: 'Paste',
content: 'Paste copied or cut content',
iconCss: 'e-icons e-paste'
},
buttonSettings: {
content: 'Paste',
iconCss: 'e-icons e-paste'
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>
Customization
You can use the cssClass property to customize the appearance of the tooltip with your own custom styles.
import { Ribbon, RibbonItemType, RibbonTabModel } from '@syncfusion/ej2-ribbon';
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Clipboard",
groupIconCss: 'e-icons e-paste',
collections: [
{
items: [{
type: RibbonItemType.SplitButton,
splitButtonSettings: {
content: 'Paste',
iconCss: 'e-icons e-paste',
items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }]
},
ribbonTooltipSettings: {
title: 'Paste',
content: 'Insert the clipboard content where the cursor is currently placed.',
cssClass: 'custom-tooltip'
}
}]
},
{
items: [{
type: RibbonItemType.Button,
buttonSettings: {
content: 'Cut',
iconCss: 'e-icons e-cut'
},
ribbonTooltipSettings: {
title: 'Cut',
content: 'Places the selected text or object on the clipboard so that you can paste it somewhere else.',
cssClass: 'custom-tooltip'
}
}, {
type: RibbonItemType.Button,
buttonSettings: {
content: 'Copy',
iconCss: 'e-icons e-copy'
},
ribbonTooltipSettings: {
title: 'Copy',
content: 'Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.',
cssClass: 'custom-tooltip'
}
}, {
type: RibbonItemType.Button,
buttonSettings: {
content: 'Format Painter',
iconCss: 'e-icons e-format-painter'
},
ribbonTooltipSettings: {
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'
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Essential JS 2 - Ribbon</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-ribbon/styles/material.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#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;
}