Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tool Tip Position Problem

    Hello All,
    I have a datagrid with columns as Course, Method, location etc.For simplicity consider course only. Each course has its own discription stored in database. I have to show the discription as a tooltip for corresponding course. Note:- This datagrid rendered inside a <div> tag which is having scroll bar property as 'auto'.
    Now the problem is that it is not showing the tool tip at correct position if i move any of the scrollbar(<div> or browser).

    //----------------------
    html code is follows:-

    <div style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 350px">
    <asp:datagrid id="DGridCourse" runat="server" Width="100%" DataKeyField="CourseID">
    <columns>
    <asp:templatecolumn HeaderText="Course Name">
    <itemtemplate>
    <!-- This is the Content of the tool tip - style property is currently hidden and changed to 'visible' as soon as move comes over it-->
    <div class="RegDescript" id='<%# DataBinder.Eval(Container.DataItem,"CourseID") %>' >
    <%# DataBinder.Eval(Container.DataItem,"Description") %>
    </div>
    <div class="RegCourseName" onmousemove="DescriptionPos(document.getElementById('<%# DataBinder.Eval(Container.DataItem,"CourseID") %>'))"
    onmouseover="openDescript(document.getElementById('<%# DataBinder.Eval(Container.DataItem,"CourseID") %>'))"
    onmouseout="closeDescript(document.getElementById('<%# DataBinder.Eval(Container.DataItem,"CourseID") %>'))">
    <%# DataBinder.Eval(Container.DataItem,"CourseName") %>
    </div>
    </itemtemplate>
    </asp:templatecolumn>
    <asp:boundcolumn DataField="Method" HeaderText="Method"></asp:boundcolumn>
    </columns>
    </asp:datagrid>
    </DIV>

    //-------------------

    function openDescript(obj) {
    obj.style.visibility = "visible";
    }

    function closeDescript(obj) {
    obj.style.visibility = "hidden";
    }

    function DescriptionPos(objTip){
    objTip.style.left=event.x+"px";
    objTip.style.top=event.y+"px";

    }
    //---------------------------------------
    .RegDescript {
    visibility: hidden;
    border: 2px solid #688EB3;
    color: #003366;
    background-color: #FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size: .65em;
    width: 300px;
    position:absolute;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Welcome Atul.

    Please don't crosspost your question:

    http://www.codingforums.com/postguide.htm
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •