ASP.NET Tip: How To Show A Tooltip Using The ASP.NET Popup Control

07 July 2011

Did you know that you can use the DevExpress ASP.NET Popup control to show just about any type of tooltip?

Check out this example which shows a helpful tooltip when the end-user enter an input field:

ASP.NET Tooltip using DevExpress Popup Control

The tooltip then disappears out of the way when the end-user exits the field.

To try this sample live now, click here: Popup Control - Client-Side Functionality

To see the code, click on the 'Code' tab of the demo at the top right. Below I'll show you a modified and simpler version of this sample.

Versatile Popup Control

Why use the DevExpress ASP.NET Popup Control? Because it's versatile, customizable and provides great client-side events and functionality.

You can even use it with the DevExpress ASP.NET GridView:  ASPxGridView Cell Template Popups

Display A Simple Tooltip

Let's see how easy it is to add a simple tooltip when we mouse-over a hyperlink:

image

Follow these 3 easy steps:

1. Declare your HTML element that you'd like to attach the popup control to. We'll use the hyperlink element with ID of "idUser1" to attach the Popup Control to:

<p>
    Mouse over <a id="idUser1" href="#">this link</a> to see the slick tool tip using the DevExpress ASP.NET Popup control!
</p>

2. Declare your ASPxPopupControl and set the PopupElementID to the HTML element that it will attach to (idUser1 in our case):

<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" 
    PopupAction="MouseOver" PopupElementID="idUser1"
    ShowHeader="False" Width="100px" PopupHorizontalAlign="LeftSides" 
    PopupVerticalAlign="Above" PopupVerticalOffset="-10" 
    PopupHorizontalOffset="-10" CloseAction="MouseOut">
    <ContentStyle CssClass="pcContent"></ContentStyle>
    <ContentCollection>
        <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server" SupportsDisabledAttribute="True">
            <div>
                DevExpress FTW!
            </div>
            <div class="pcCalloutBack">
                <div class="pcCallout"></div>
            </div>
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>

You can also add just about any content you want within the ContentCollection area of the ASPxPopupControl. Here, we've just added a couple DIV elements to display a simple message and assigned CSS classes for styling. We've also defined the PopupAction to be MouseOver. Set the CloseAction to MouseOut to hide the tooltip after the mouse over.

3. Style and customize your popup control. Here are a couple of the styles used for the DIV element used within the popup:

<head runat="server">
    <title>ASP.NET Tooltips using DevExpress ASP.NET Popup Control</title>
    <style type="text/css">
        .pcContent {
            background-color: Yellow;
        }
        .pcCalloutBack {
            position: absolute;
            border-style: solid;
            width: 0px;
            margin-top: 10px;
            margin-left: 0px;
            border-width: 15px 15px 0px 5px;
            border-color: transparent;
            border-top-color: #8B8B8B;
        }
        .pcCallout {
            position: absolute;
            border-style: solid;
            width: 0px;
            margin-top: -17px;
            margin-left: -5px;
            border-width: 15px 15px 0px 5px;
            border-color: transparent;
            border-top-color: Yellow;
        }
    </style>
</head>

Now run this sample and mouse over the hyperlink to see the slick tooltip.

Download a sample version of the above as a simple ASP.NET website:

bDownloadNow

Helpful CodeCentral Samples

Here are 3 other helpful CodeCentral samples that show you how to return values and pass parameters with the ASPxPopupControl:

 

Summary

Use the DevExpress ASP.NET Popup Control to display a slick and customized tooltip for your websites. Then drop me a line below with your thoughts, thanks.

Save time and money...

Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Follow MehulHarry on Twitter

7 comment(s)
Pornsak Tangsujaritvijit

Great awesome !. How to use in mvc extension  

7 July, 2011
Mehul Harry (DevExpress)

Pornsak,

Thanks, let me look into it and I'll get back to you.

8 July, 2011
Benjamin Allen

I have a Windows Detail View controller in my XAF app that does something similiar.  Anyway to put this in a an ASP.Net Detail View controller for dynamic creation at runtime?

12 July, 2011
Mehul Harry (DevExpress)

Hi Benjamin,

I'm not sure but I've asked the XAF team to look into it and they'll leave a comment here.

Thanks.

12 July, 2011
Mehul Harry (DevExpress)

Pornsak,

Take a look at this MVC PopupControl extension's demo which shows how you can show a tooltip in ASP.NET MVC:

mvc.devexpress.com/.../ClientSideAPI

Thanks.

12 July, 2011
Apostolis Bekiaris (DevExpress)

@Benjamin

You can think of XAF as a standard ASP.NET application. Of course what you request is doable and we’ll describe how in a blog post. For now, I can redirect you to an http://www.expandframework.com implementation of basic tooltip support for both platforms.

http://goo.gl/z816X

http://goo.gl/luTyf

13 July, 2011
Benjamin Allen

Thank you Apostolis.  I am new with ASP.NET and didn't realize the conversion of my existing WinForms controller would be so easy.

14 July, 2011

Please login or register to post comments.