Tooltip

3 Aug 202313 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.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> pasteMenuOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };

    var cutOptions = new RibbonTooltipSettings { Title = "Cut" };
    var copyOptions = new RibbonTooltipSettings { Title = "Copy" };
    var pasteOptions = new RibbonTooltipSettings { Title = "Paste" };
    var formatOptions = new RibbonTooltipSettings { Title = "Format Painter" };
}

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(item =>
            {
                item.Type(RibbonItemType.SplitButton).SplitButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Items(pasteMenuOptions).Content("Paste");
                }).RibbonTooltipSettings(pasteOptions).Add();
            }).Add();
            collection.Items(item =>
            {
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).RibbonTooltipSettings(cutOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).RibbonTooltipSettings(copyOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-format-painter").Content("Format Painter");
                }).RibbonTooltipSettings(formatOptions).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

Adding Content

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

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> pasteMenuOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };

    var cutOptions = new RibbonTooltipSettings { Title = "Cut", Content = "Places the selected text or object on the clipboard so that you can paste it somewhere else." };
    var copyOptions = new RibbonTooltipSettings { Title = "Copy", Content = "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere." };
    var pasteOptions = new RibbonTooltipSettings { Title = "Paste", Content = "Insert the clipboard content where the cursor is currently placed." };
    var formatOptions = new RibbonTooltipSettings { Title = "Format Painter", Content = "Copies the formatting style of a selected text or object and applies it to other content within the document." };

}

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(item =>
            {
                item.Type(RibbonItemType.SplitButton).SplitButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Items(pasteMenuOptions).Content("Paste");
                }).RibbonTooltipSettings(pasteOptions).Add();
            }).Add();
            collection.Items(item =>
            {
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).RibbonTooltipSettings(cutOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).RibbonTooltipSettings(copyOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-format-painter").Content("Format Painter");
                }).RibbonTooltipSettings(formatOptions).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

Adding Icon

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

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> pasteMenuOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };

    var cutOptions = new RibbonTooltipSettings { 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" };
    var copyOptions = new RibbonTooltipSettings { Title = "Copy", Content = "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.", IconCss = "e-icons e-copy" };
    var pasteOptions = new RibbonTooltipSettings { Title = "Paste", Content = "Insert the clipboard content where the cursor is currently placed.", IconCss = "e-icons e-paste" };
    var formatOptions = new RibbonTooltipSettings { 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" };
}

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(item =>
            {
                item.Type(RibbonItemType.SplitButton).SplitButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Items(pasteMenuOptions).Content("Paste");
                }).RibbonTooltipSettings(pasteOptions).Add();
            }).Add();
            collection.Items(item =>
            {
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).RibbonTooltipSettings(cutOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).RibbonTooltipSettings(copyOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-format-painter").Content("Format Painter");
                }).RibbonTooltipSettings(formatOptions).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

Customization

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

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Ribbon
@using Syncfusion.EJ2.Navigations

@{
    List<MenuItem> pasteMenuOptions = new List<MenuItem>() { new MenuItem { Text = "Keep Source Format" }, new MenuItem { Text = "Merge format" }, new MenuItem { Text = "Keep text only" } };

    var cutOptions = new RibbonTooltipSettings { 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", CssClass = "custom-tooltip" };
    var copyOptions = new RibbonTooltipSettings { Title = "Copy", Content = "Copies the chosen text or object to the clipboard so that you can reuse it elsewhere.", IconCss = "e-icons e-copy", CssClass = "custom-tooltip"  };
    var pasteOptions = new RibbonTooltipSettings { Title = "Paste", Content = "Insert the clipboard content where the cursor is currently placed.", IconCss = "e-icons e-paste", CssClass = "custom-tooltip"  };
    var formatOptions = new RibbonTooltipSettings { 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", CssClass = "custom-tooltip" };
}

@Html.EJS().Ribbon("ribbon").Tabs(tab =>
{
    tab.Header("Home").Groups(group =>
    {
        group.Header("Clipboard").Collections(collection =>
        {
            collection.Items(item =>
            {
                item.Type(RibbonItemType.SplitButton).SplitButtonSettings(button =>
                {
                    button.IconCss("e-icons e-paste").Items(pasteMenuOptions).Content("Paste");
                }).RibbonTooltipSettings(pasteOptions).Add();
            }).Add();
            collection.Items(item =>
            {
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-cut").Content("Cut");
                }).RibbonTooltipSettings(cutOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-copy").Content("Copy");
                }).RibbonTooltipSettings(copyOptions).Add();
                item.Type(RibbonItemType.Button).ButtonSettings(button =>
                {
                    button.IconCss("e-icons e-format-painter").Content("Format Painter");
                }).RibbonTooltipSettings(formatOptions).Add();
            }).Add();
        }).Add();
    }).Add();
}).Render()

<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>