asked on

Increase time of tooltip

Problem is that the tooltip goes away after like 9 seconds. Is there a way to increase this time limit on a tooltip. I have rather large notes fields that they don't want to show everything so I truncate it and show a tooltip. But I have not found a way to increase the viewing time of a tooltip. This is in aasp.net 1.1.

<asp:TemplateColumn HeaderText="Notes">
										<ItemTemplate>
											<a title='<%# DataBinder.Eval(Container.DataItem, "strNotes").ToString() %>'>
												<%# Truncate(DataBinder.Eval(Container.DataItem, "strNotes").ToString(),10) %>
											</a>
										</ItemTemplate>
									</asp:TemplateColumn>



Public Function Truncate(ByVal input As String, ByVal characterLimit As Integer) As String
        Dim output As String = input

        ' Check if the string is longer than the allowed amount 
        ' otherwise do nothing 
        If output.Length > characterLimit AndAlso characterLimit > 0 Then

            ' cut the string down to the maximum number of characters 
            output = output.Substring(0, characterLimit)

            ' Check if the character right after the truncate point was a space 
            ' if not, we are in the middle of a word and need to remove the rest of it 
            If input.Substring(output.Length, 1) <> " " Then
                Dim LastSpace As Integer = output.LastIndexOf(" ")

                ' if we found a space then, cut back to that space 
                If LastSpace <> -1 Then
                    output = output.Substring(0, LastSpace)
                End If
            End If
            ' Finally, add the "..." 
            output += "..."
        End If
        Return output
    End Function

Open in new window

strickdd

The tooltip display timer is controlled by the browser. What you can do is have a javascript mouse-over event that displays a <div> with your text in it. Then have a mouse-out event that hides that div. Simple, elegant, effective.

kdeutsch

ASKER

Hi,
Don't work with javascript much, so I would need some help on this.

ASKER CERTIFIED SOLUTION

strickdd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

masterpass

I don't think you can increase the time of the tooltip. But you can write a javascript so that you have every thing as you wanted them to be . See the demo in this site

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm

SOLUTION

Nasir Razzaq

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Khalid Mehmood Awan

Already resolved Question...
https://www.experts-exchange.com/questions/22100546/How-to-increase-the-duration-of-a-tooltip.html

strickdd

Wow, so many helpful solutions that are so similar to mine! I must be right in my response then! Woot!

Khalid Mehmood Awan

but i have given link of SOLVED question from experts-exchange.... So points will be mine :P (just kidding)

Already resolved Question...
https://www.experts-exchange.com/questions/22100546/How-to-increase-the-duration-of-a-tooltip.html

kdeutsch

ASKER

Ok, finally able to get back to this issue, and here is what I created and here are my problems.

Now that i have this implimented it shows the div across the whole screen and not jsut as a pop-up, and it gives me an error on my datagrid.

Object reference not set to an instance of an object.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
It is throwing the exception on my datagrid bind.
myDataGrid.DataBind()

But if I remove all the javscript stuff it populates just fine. Is there something I am doing wrong in thsi javascript code or code behind.

First code,
<script language="javascript">

                  function ShowTooltip(notes)
                  {
                        document.getElementById("td0").innerText=Notes;
                        x = event.clientX + document.body.scrollLeft;
                        y = event.clientY + document.body.scrollTop + 10;
                        Popup.style.display="block";
                        Popup.style.le ft = x;
                        Popup.style.top = y;
                  }

                  function HideTooltip()
                  {
                        Popup.style.display="none";
                  }

            </script>

Here is the Div html.
      <div id="Popup" class="transparent">
                        <div style="background-color: #003366"><b><center><span>Notes</span></center></b></div><div>
                              <table width=50% border=0 cellpadding=0 cellspacing=0>
                                    <tr>
                                    <td id=td0 align=left class=runtext1></td>
                                    </tr>
                                    </tr>
                              </table>
                        </div>
                  </div>

Here is the code behind in the Item_dtaboound event
Private Sub myDataGrid_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles myDataGrid.ItemDataBound
If e.Item.Cells(9).Text > "0" Then
e.Item.Cells(7).BackColor = System.Drawing.Color.Tomato
End If

If e.Item.DataItem Is Nothing Then
e.Item.Attributes.Add("onmouseover", ("ShowTooltip('" & DataBinder.Eval(e.Item.DataItem, "strNotes").ToString() & "','"))
e.Item.Attributes.Add("onmouseout", "HideTooltip();")
End If
End Sub

kdeutsch

ASKER

Ok,
when I comment out the code behind it works but the pop-up does not becasue no data is going to it.

'If e.Item.DataItem Is Nothing Then
' e.Item.Attributes.Add("onmouseover", ("ShowTooltip('" & DataBinder.Eval(e.Item.DataItem, "strNotes").ToString() & "','"))
' e.Item.Attributes.Add("onmouseout", "HideTooltip();")
'End If

SOLUTION

masterpass

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kdeutsch

ASKER

All,

I think it is all about the itemdatabound event. I have some nulls in some of the notes and in a datagrid they show up as   for some reason. Originally the first part of the if statment is like this

If e.Item.DataItem Is Not Nothing Then

But I get a blue underline asking for end of statement so I changed to above without knowing better. how do i make this work.

kdeutsch

ASKER

masterpass,
Still getting the code behind error that point to that line. I treid changing to up.strNotes and the strNotes and then Notes as its called in datagrid. I even tried a different field with same results.
I took out the if then statment and got same results.

SOLUTION

Nasir Razzaq

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kdeutsch

ASKER

CodeCruiser,
The last statment allows it to build and show everything properly. i think i need to stop here and award points and ask other questions about the rest that is wrong.

kdeutsch

ASKER

Thanks for the help, still having problems on the javascript side but will ask more questions about it. But he code behind seems to be working.