Advanced Search

Results 1 to 3 of 3

Thread: Tool Tip Position Problem

  1. #1
    Join Date
    Feb 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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. #2
    Join Date
    Aug 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    I have nearly the same problem and I just want to know if you found any solution. Any help would be great.

    THX

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,674
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    Positioning of that type needs to take place applied to an absolutely positioned element that lies outside all other elements (except the body) on the page but that is adjusted using the scroll state of both the page and the scrolling element, or whose position is determined by the (mouseover or click) event's coordinates on the page. To be more specific, we would need to see the complete source code and markup. Better yet, a link to your live page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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