RibbonBar - Enhanced ToolTip

  • Home
  • Insert
  • View
Item ImagePaste Item ImageCutItem ImageCopyItem ImageFormat
Clipboard
Item ImageItem ImageItem ImageItem ImageItem ImageItem Image
Font
Item ImageItem ImageItem ImageItem Image
Item ImageItem Image
Item ImageItem Image
Paragraph
Item ImageFind 
  • Item ImageFind...
  • Item ImageGo to...
Item ImageReplaceItem ImageSelect 
Editing
Item ImagePictureItem ImageClip ArtItem ImageShapes 
Item ImageSmartArtItem ImageChart
Illustrations
Item ImageHyperlinkItem ImageBookmarkItem ImageCross-reference
Links
Item ImageMacros 
  • Item ImageView Macros
  • Item ImageRecord Macro...
Macros
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

In addition to the default tooltip that comes with all controls in the .NET Framework we created our own Enhanced tooltip specially designed for the RadRibbonBar control. It can be used to provide detailed information related to the associated commands or shortcut keys. Using the Enhanced tooltip one could reduce the need for command-related Help as well as present any other information needed to the end user in order to perform the related action or command.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadRibbonBar RenderMode="Lightweight" ID="RadRibbonBar1" runat="server" Width="854px" Style="max-width: 854px;"
            Skin="Office2007">
            <telerik:RibbonBarTab Text="Home">
                <telerik:RibbonBarGroup Text="Clipboard" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarMenu Size="Large" Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png"
                            ToolTip="Paste the contents of the Clipboard.">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Paste" ImageUrl="../../Images/Icons/home/Paste.png" ToolTip="Paste the content.">
                                </telerik:RibbonBarMenuItem>
                                <telerik:RibbonBarMenuItem Text="Paste Special..." ImageUrl="../../Images/Icons/home/Paste.png"
                                    ToolTip="Paste Special.">
                                </telerik:RibbonBarMenuItem>
                            </Items>
                        </telerik:RibbonBarMenu>
                        <telerik:RibbonBarButton Size="Medium" Text="Cut" ImageUrl="../../Images/Icons/home/Cut.png" ToolTip="Cut the selection and put it on the Clipboard.">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Copy" ImageUrl="../../Images/Icons/home/Copy.png"
                            ToolTip="Copy the selection and put it on the Clipboard."></telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Format" ImageUrl="../../Images/Icons/home/Format_Painter.png"
                            ToolTip="Copy formatting from one place and apply it to another.<br /><br />Double-click this button to apply the same formatting to multiple places in the document.">
                        </telerik:RibbonBarButton>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Font">
                    <Items>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Bold" ImageUrl="../../Images/Icons/home/font/Bold.png"
                            ToolTip="Make the selected text bold."></telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Italic" ImageUrl="../../Images/Icons/home/font/Italic.png"
                            ToolTip="Italicize the selected text."></telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Underline" ImageUrl="../../Images/Icons/home/font/Underline.png"
                            ToolTip="Underline the selected text."></telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleButton Size="Small" Text="Strikethrough" ImageUrl="../../Images/Icons/home/font/Strike.png"
                            ToolTip="Draw a line through the middle of the selected text."></telerik:RibbonBarToggleButton>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Superscript" ImageUrl="../../Images/Icons/home/font/Superscript.png"
                                    ToolTip="Create small letters above the line of text."></telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Small" Text="Subscript" ImageUrl="../../Images/Icons/home/font/Subscript.png"
                                    ToolTip="Create small letters below the line of text."></telerik:RibbonBarToggleButton>
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Paragraph">
                    <Items>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Text="Align Left" ImageUrl="../../Images/Icons/home/paragraph/AlignLeft.png"
                                    ToolTip="Align text to the left."></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Align Center" ImageUrl="../../Images/Icons/home/paragraph/AlignCenter.png"
                                    ToolTip="Center text."></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Align Right" ImageUrl="../../Images/Icons/home/paragraph/AlignRight.png"
                                    ToolTip="Align text to the right."></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Justify" ImageUrl="../../Images/Icons/home/paragraph/Justify.png"
                                    ToolTip="Align text to both left and right margins, adding extra space between words as necessary.<br /><br />This creates a clean look along the left and right side of the page.">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Unordered List" ImageUrl="../../Images/Icons/home/paragraph/UL.png"
                                    ToolTip="Start a bulleted list."></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Numbered List" ImageUrl="../../Images/Icons/home/paragraph/OL.png"
                                    ToolTip="Start a numbered list."></telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                        <telerik:RibbonBarButtonStrip>
                            <Buttons>
                                <telerik:RibbonBarButton Size="Small" Text="Decrease Indent" ImageUrl="../../Images/Icons/home/paragraph/DecrIndent.png"
                                    ToolTip="Decreases the indent level of the paragraph."></telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Size="Small" Text="Increase Indent" ImageUrl="../../Images/Icons/home/paragraph/IncrIndent.png"
                                    ToolTip="Increases the indent level of the paragraph."></telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarButtonStrip>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Editing" EnableLauncher="true">
                    <Items>
                        <telerik:RibbonBarSplitButton Size="Medium" Text="Find" ImageUrl="../../Images/Icons/home/Find.png"
                            ToolTip="Find and select specific text, formatting, or type of information within the document.<br /><br />You can also replace the information with new text or formatting.">
                            <Buttons>
                                <telerik:RibbonBarButton Text="Find..." ImageUrl="../../Images/Icons/home/Find.png" ToolTip="Find text or other content in the document.">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Go to..." ImageUrl="../../Images/Icons/home/Go.png" ToolTip="Navigate to a specific place in the document.<br /><br />Depending on the type of document, you can navigate to a specific page number, line number, footnote, table, comment, or other object.">
                                </telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                        <telerik:RibbonBarButton Size="Medium" Text="Replace" ImageUrl="../../Images/Icons/home/Replace.png"
                            ToolTip="Replace text in the document."></telerik:RibbonBarButton>
                        <telerik:RibbonBarMenu Size="Medium" Text="Select" ImageUrl="../../Images/Icons/home/Select.png"
                            ToolTip="Select text or objects in the document.<br /><br />Use Select Object to allow you to select objects that have been positioned behind the text.">
                            <Items>
                                <telerik:RibbonBarMenuItem Text="Select All" ImageUrl="../../Images/Icons/home/Select_All.png"
                                    ToolTip="Select all items.">
                                </telerik:RibbonBarMenuItem>
                                <telerik:RibbonBarMenuItem Text="Select Objects" ImageUrl="../../Images/Icons/home/Select.png"
                                    ToolTip="Select rectangular regions of ink strokes, shapes and text.">
                                </telerik:RibbonBarMenuItem>
                            </Items>
                        </telerik:RibbonBarMenu>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="Insert">
                <telerik:RibbonBarGroup Text="Illustrations">
                    <Items>
                        <telerik:RibbonBarButton Size="Large" Text="Picture" ImageUrl="../../Images/Icons/insert/Picture.png"
                            ToolTip="Insert a picture from a file."></telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Clip Art" ImageUrl="../../Images/Icons/insert/Clipart.png"
                            ToolTip="insert Clip Art into the document, including drawings, movies, sounds, or stock photography to illustrate a specific concept.">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarMenu Size="Large" Text="Shapes" ImageUrl="../../Images/Icons/insert/Shapes.png"
                            ToolTip="Insert ready-made shapes, such as rectangles and circles, arrows, lines, flowchart symbols, and callouts.">
                        </telerik:RibbonBarMenu>
                        <telerik:RibbonBarButton Size="Large" Text="SmartArt" ImageUrl="../../Images/Icons/insert/SmartArt.png"
                            ToolTip="Insert a SmartArt graphic to visually communicate information.<br /><br />SmartArt graphics range from graphical lists and process diagrams to more complex graphics, such as Venn diagrams and organization charts.">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Chart" ImageUrl="../../Images/Icons/insert/Chart.png"
                            ToolTip="Insert a chart to illustrate and compare data.<br /><br />Bar, Pie, Line, Area and Surface are some of the available types.">
                        </telerik:RibbonBarButton>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Links">
                    <Items>
                        <telerik:RibbonBarButton Size="Large" Text="Hyperlink" ImageUrl="../../Images/Icons/insert/Link.png"
                            ToolTip="Create a link to a Web page, a picture, an e-mail address, or a program.">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Bookmark" ImageUrl="../../Images/Icons/insert/Bookmark.png"
                            ToolTip="Create a bookmark to assign a name to a specific point in a document.<br /><br />You can make hyperlinks that jump directly to a bookmarked location.">
                        </telerik:RibbonBarButton>
                        <telerik:RibbonBarButton Size="Large" Text="Cross-reference" ImageUrl="../../Images/Icons/insert/Cross_reference.png"
                            ToolTip="Refer to items such as headings, figures, and tables by inserting a cross reference.<br /><br />Cross references are automatically updated if the content is moved to another location. By default, cross references are inserted as hyperlinks.">
                        </telerik:RibbonBarButton>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
            <telerik:RibbonBarTab Text="View">
                <telerik:RibbonBarGroup Text="Zoom">
                    <Items>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Large" Text="Zoom" ImageUrl="../../Images/Icons/view/Zoom.png"
                                    ToolTip="Show the Zoom dialog box to specify the zoom level of the document.<br /><br />In most cases, you can also use the zoom controls in the status bar at the bottom of the window to quickly zoom the document.">
                                </telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Large" Text="100%" ImageUrl="../../Images/Icons/view/100.png"
                                    ToolTip="Zoom the document ot 100% of the normal size."></telerik:RibbonBarToggleButton>
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                        <telerik:RibbonBarToggleList>
                            <ToggleButtons>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="One Page" ImageUrl="../../Images/Icons/view/One_Page.png"
                                    ToolTip="Zoom the document so that an entire page fits in the window."></telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="Two Pages" ImageUrl="../../Images/Icons/view/Two_Pages.png"
                                    ToolTip="Zoom the document so that two pages fit in the window."></telerik:RibbonBarToggleButton>
                                <telerik:RibbonBarToggleButton Size="Medium" Text="Page Width" ImageUrl="../../Images/Icons/view/Page_Width.png"
                                    ToolTip="Zoom the document so that the width of the page matches the width of the window.">
                                </telerik:RibbonBarToggleButton>
                            </ToggleButtons>
                        </telerik:RibbonBarToggleList>
                    </Items>
                </telerik:RibbonBarGroup>
                <telerik:RibbonBarGroup Text="Macros">
                    <Items>
                        <telerik:RibbonBarSplitButton Size="Large" Text="Macros" ImageUrl="../../Images/Icons/view/Macros.png"
                            ToolTip="Click here to record a macro or to access other macro options.">
                            <Buttons>
                                <telerik:RibbonBarButton Text="View Macros" ImageUrl="../../Images/Icons/view/Macros.png" ToolTip="View the list of macros, from which you can run, create or delete a macro.">
                                </telerik:RibbonBarButton>
                                <telerik:RibbonBarButton Text="Record Macro..." ImageUrl="../../Images/Icons/view/Macros_Record.png"
                                    ToolTip="Start or stop recording a macro."></telerik:RibbonBarButton>
                            </Buttons>
                        </telerik:RibbonBarSplitButton>
                    </Items>
                </telerik:RibbonBarGroup>
            </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?