Mouseover a datalist item and calling up dynamic data?

Posted on 2007-08-01
Last Modified: 2011-04-14
I'm trying to figure out a good way to do a mouseover event on a datalist and then have that mouseover produce a popup tooltip that shows the details for that client name. I currently have a datalist being loaded onto my main page and I have the mouseover portion working, it's just not showing the data that I'm after.

Here is my current code:

        <asp:DataList ID="DataList1" runat="server">
   onmouseover="ShowContent('ClientName'); return true;"
   onmouseout="HideContent('ClientName'); return true;"
<%# Eval("Client Name") %>
      border-style: none;
      background-color: white;
      padding: 0px;">

<%# Eval("Client Name") %>

        <FooterTemplate> </table> </FooterTemplate>

Currently when I perform the mouseover on each datalist item, it only shows the name of the first item in the list. I assumed, since I'm still within the same datalist, that it would just 'work' and pull up the details, but it's not.

Oh and I'm populating the datalist from codebehind using a datatable.

Question by:ApexCo
    LVL 12

    Expert Comment

    you can add this in a script block (not the runat='server' block)

    <script type="text/javascript">

        var offsetfromcursorX=12 //Customize x offset of tooltip
        var offsetfromcursorY=10 //Customize y offset of tooltip

        var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
        var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

        document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
        document.write('<img id="dhtmlpointer" src="images/arrow2.gif">') //write out pointer image

        var ie=document.all
        var ns6=document.getElementById && !document.all
        var enabletip=false
        if (ie||ns6)
        var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

        var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

        function ietruebody(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

        function ddrivetip(thetext, thewidth, thecolor){
        if (ns6||ie){
        if (typeof thewidth!="undefined")"px"
        if (typeof thecolor!="undefined" && thecolor!="")
        return false

        function positiontip(e){
        if (enabletip){
        var nondefaultpos=false
        var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
        var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
        //Find out how close the mouse is to the corner of the window
        var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
        var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

        var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
        var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

        var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

        //if the horizontal distance isn't enough to accomodate the width of the context menu
        if (rightedge<tipobj.offsetWidth){
        //move the horizontal position of the menu to the left by it's width"px"
        else if (curX<leftedge)"5px"
        //position the horizontal position of the menu where the mouse is positioned"px""px"

        //same concept with the vertical position
        if (bottomedge<tipobj.offsetHeight){"px"
        if (!nondefaultpos)"visible"

        function hideddrivetip(){
        if (ns6||ie){



    then you can just do something like:

    <a ONMOUSEOVER="ddrivetip('<%#String.Format("{0:d}",Container.DataItem("CREATEDDATE")) %> <br> <%#Container.DataItem("NOTE") %>')"; ONMOUSEOUT="hideddrivetip()"><%# Eval("Client Name") %></a>

    i just used createddate and note as examples of fields you can throw in there in any conceivable way with a break between them.
    LVL 6

    Accepted Solution

    Hi ApexCo

    Just off the top of my head i can see you will have quite a number of div's with the same client name. So when your are doing a mouse over the first on on the page is being populated. What you'll need to do is have each div with a seperate name and refence that div. Giving each div a unquie client id. Or what i like to do is generate a div on the fly. See what you think of this:

    First this script: What this script will do is add a div to you page dynamically and position it next to your mouse (copy and paste):

    <script language="javascript">
                var offsetx = 12;                                                              
                var offsety =  8;                                                              
                function newelement(newid)
                            var el = document.createElement('div');
                   = newid;    
                                  display = 'none';
                                  position = 'absolute';
                            el.innerHTML = '&nbsp;';
                var ie5 = (document.getElementById && document.all);
                var ns6 = (document.getElementById && !document.all);
                var ua = navigator.userAgent.toLowerCase();
                var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
                function getmouseposition(e) // thanks to Grant O. Anderson from Arizona State University
                            var iebody=(document.compatMode &&
                                  document.compatMode != 'BackCompat') ?
                                        document.documentElement : document.body;
                            pagex = (isapple == 1 ? 0 : (ie5)?iebody.scrollLeft:window.pageXOffset);
                            pagey = (isapple == 1 ? 0 : (ie5)?iebody.scrollTop:window.pageYOffset);
                            mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false;
                            mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false;

                            var lixlpixel_tooltip = document.getElementById('tooltip');
                   = (mousex+pagex+offsetx) + 'px';
                   = (mousey+pagey+offsety) + 'px';
                function tooltip(message)
                      if(!document.getElementById('tooltip')) newelement('tooltip');
                      var lixlpixel_tooltip = document.getElementById('tooltip');
                      lixlpixel_tooltip.innerHTML = message;
             = 'block';
                      document.onmousemove = getmouseposition;
                function exit()
                      document.getElementById('tooltip').style.display = 'none';
    now your datalist

    in your itemtemplate

    <span class="tip" onmouseover="tooltip('<%# Eval("Client Name") %>'); " onmouseout="exit();">
    <%# Eval("Client Name") %>

    Hope that's what you're after

    LVL 8

    Author Comment

    apb2, that's pretty awesome and does exactly what I was looking for.

    A couple of things though.
    1) The last element in my datalist doesn't have any data popping up on the mouseover, but gives me a javascript error of object required and it's pointing to the exit portion. It only happens on that last element though. And if I mouseover another element and exit there is no error...but never any data on that last one.

    2) How can I style the popup portion? I have tried all kind of CSS stuff and I can't get anything to stick. Any pointers there?

    LVL 12

    Assisted Solution

    1) could be a stray quote in the actual data you're trying to display that's prematurely exiting the javascript
    LVL 8

    Author Comment

    Good thought, but I am not seeing anything. Here is the string I'm using for the data:

                        <span class="tip" onmouseover="tooltip('<%# Eval("Client Name") %><br /><%# Eval("ClientID") %><br /><%# Eval("MatterID") %><br /><%# Eval("Matter Name") %><br /><%# Eval("Status") %><br /><%# Eval("AOP Code") %><br /><%# Eval("Area of Practice") %><br /><%# Eval("Responsible Attorney") %><br /><%#String.Format("{0:d}",Container.DataItem("Date Opened")) %>')" onmouseout="exit();">
                        <%# Eval("Client Name") %>

    My biggest hurdle is styling the popup, but I'm striking out everywhere.
    LVL 8

    Author Comment

    I figured out the errors, was missing a semicolon *sigh*.

    I believe this question has been fully answered, and I would like to split the points with you both for your help. I will ask another question on the styling since I feel that is a separate issue.
    LVL 6

    Expert Comment

    Sorry i didn't get back to you, glad that worked for you.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
    Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
    Here's a very brief overview of the methods PRTG Network Monitor ( offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now