Tooltip in EJ2 TypeScript Ribbon
11 Aug 202624 minutes to read
The Ribbon control supports tooltips 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 { 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-ribbon/styles/tailwind3.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>
<style>
.ribbonTemplate {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ribbonTemplate.Large {
flex-direction: column;
}
.ribbonTemplate.Large .e-icons {
font-size: 35px;
}
.ribbonTemplate.Medium .e-icons,
.ribbonTemplate.Small .e-icons {
font-size: 20px;
margin: 15px 5px;
}
.ribbonTemplate.Small .text {
display: none;
}
.font-group .e-ribbon-group-content {
justify-content: center;
}
</style>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>Adding Content
The content property is used 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-ribbon/styles/tailwind3.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>
<style>
.ribbonTemplate {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ribbonTemplate.Large {
flex-direction: column;
}
.ribbonTemplate.Large .e-icons {
font-size: 35px;
}
.ribbonTemplate.Medium .e-icons,
.ribbonTemplate.Small .e-icons{
font-size: 20px;
margin: 15px 5px;
}
.ribbonTemplate.Small .text {
display:none;
}
.font-group .e-ribbon-group-content {
justify-content: center;
}
</style>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>Adding Icon
The iconCss property is used to specify an icon for 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-ribbon/styles/tailwind3.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>
<style>
.ribbonTemplate {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ribbonTemplate.Large {
flex-direction: column;
}
.ribbonTemplate.Large .e-icons {
font-size: 35px;
}
.ribbonTemplate.Medium .e-icons,
.ribbonTemplate.Small .e-icons{
font-size: 20px;
margin: 15px 5px;
}
.ribbonTemplate.Small .text {
display:none;
}
.font-group .e-ribbon-group-content {
justify-content: center;
}
</style>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>Customization
The cssClass property allows for customizing the appearance of the tooltip by applying custom CSS 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/34.2.2/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-ribbon/styles/tailwind3.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>
<style>
: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;
}
</style>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="ribbon"></div>
</div>
</body>
</html>