Ribbon Tooltip in EJ2 JavaScript Menu control

25 Mar 202524 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.

index.js
index.html
var tabs = [{
  header: "Home",
  groups: [{
    header: 'Clipboard',
    collections: [{
      items: [{
        type: 'Button',
        ribbonTooltipSettings: {
          title: 'Cut'
        },
        buttonSettings: {
          content: 'Cut',
          iconCss: 'e-icons e-cut'
        }
      }]
    }, {
      items: [{
        type: 'Button',
        ribbonTooltipSettings: {
          title: 'Copy'
        },
        buttonSettings: {
          content: 'Copy',
          iconCss: 'e-icons e-copy'
        }
      }, {
        type: 'Button',
        ribbonTooltipSettings: {
          title: 'Paste'
        },
        buttonSettings: {
          content: 'Paste',
          iconCss: 'e-icons e-paste'
        }
      }]
    }]
  }]
}];

var ribbon = new ej.ribbon.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/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-ribbon/styles/material.css" rel="stylesheet">
    <!--system js reference and configuration-->
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="ribbon"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Adding Content

You can use the content property to set the tooltip content for each Ribbon item.

index.js
index.html
var tabs = [{
    header: "Home",
    groups: [{
        header: 'Clipboard',
        collections: [{
            items: [{
                type: 'Button',
                ribbonTooltipSettings: {
                    title: 'Cut',
                    content: 'Cut selected text or objects'
                },
                buttonSettings: {
                    content: 'Cut',
                    iconCss: 'e-icons e-cut'
                }
            }]
        }, {
            items: [{
                type: 'Button',
                ribbonTooltipSettings: {
                    title: 'Copy',
                    content: 'Copy selected text or objects'
                },
                buttonSettings: {
                    content: 'Copy',
                    iconCss: 'e-icons e-copy'
                }
            }, {
                type: 'Button',
                ribbonTooltipSettings: {
                    title: 'Paste',
                    content: 'Paste copied or cut content'
                },
                buttonSettings: {
                    content: 'Paste',
                    iconCss: 'e-icons e-paste'
                }
            }]
        }]
    }]
}];

var ribbon = new ej.ribbon.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/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-ribbon/styles/material.css" rel="stylesheet">
    <!--system js reference and configuration-->
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="ribbon"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Adding Icon

You can use the iconCss property to specify the icons to be displayed in the tooltip.

index.js
index.html
var tabs = [{
    header: "Home",
    groups: [{
        header: 'Clipboard',
        collections: [{
            items: [{
                type: '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: 'Button',
                ribbonTooltipSettings: {
                    title: 'Copy',
                    content: 'Copy selected text or objects',
                    iconCss: 'e-icons e-copy'
                },
                buttonSettings: {
                    content: 'Copy',
                    iconCss: 'e-icons e-copy'
                }
            }, {
                type: 'Button',
                ribbonTooltipSettings: {
                    title: 'Paste',
                    content: 'Paste copied or cut content',
                    iconCss: 'e-icons e-paste'
                },
                buttonSettings: {
                    content: 'Paste',
                    iconCss: 'e-icons e-paste'
                }
            }]
        }]
    }]
}];

var ribbon = new ej.ribbon.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/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-ribbon/styles/material.css" rel="stylesheet">
    <!--system js reference and configuration-->
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="ribbon"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Customization

You can use the cssClass property to customize the appearance of the tooltip with your own custom styles.

index.js
index.html
var tabs = [{
    header: "Home",
    groups: [{
        header: 'Clipboard',
        collections: [{
            items: [{
                type: 'SplitButton',
                splitButtonSettings: {
                    iconCss: 'e-icons e-paste',
                    items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }],
                    content: 'Paste'
                },
                ribbonTooltipSettings: {
                    title: 'Paste',
                    content: 'Insert the clipboard content where the cursor is currently placed.',
                    cssClass: 'custom-tooltip'
                }
            }]
        }, {
            items: [{
                type: 'Button',
                ribbonTooltipSettings: {
                    title: 'Cut',
                    content: 'Places the selected text or object on the clipboard so that you can paste it somewhere else.',
                    cssClass: 'custom-tooltip'
                },
                buttonSettings: {
                    content: 'Cut',
                    iconCss: 'e-icons e-cut'
                }
            }, {
                type: 'Button',
                ribbonTooltipSettings: {
                    title: 'Copy',
                    content: 'Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.',
                    cssClass: 'custom-tooltip'
                },
                buttonSettings: {
                    content: 'Copy',
                    iconCss: 'e-icons e-copy'
                }
            }, {
                type: 'Button',
                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'
                },
                buttonSettings: {
                    content: 'Format Painter',
                    iconCss: 'e-icons e-format-painter'
                }
            }]
        }]
    }]
}];

var ribbon = new ej.ribbon.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/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-ribbon/styles/material.css" rel="stylesheet">
    <!--system js reference and configuration-->
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="ribbon"></div>
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>