How to increase ToolTip display time?

Question

I have one GridView, in its RowDataBound Event, I am assigning ToolTip as below:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    try
    {
        if (gv.HeaderRow != null && e.Row.RowType == DataControlRowType.DataRow)
        {  
            e.Row.ToolTip = "Remarks: " + ((Label)e.Row.FindControl("lblRemarks")).Text;
        }
    }
    catch (Exception ex)
    {
        BussinessLayer.RIBOException.Instance.HandleMe(this, ex);
    }
}

Here, I want to extend the display time of the ToolTip. How to do this?

Answer 1

You need to use the ToolTipService and specifically the ShowDuration attached property.

You should be able to do the following after you set the tooltip:

ToolTipService.ShowDuration(e.Row, 10000)

Answer 2

Set the ToolTipService.ShowDuration property.

Answer 3

This works, gives spacing and other formatting options. The above accepted option did not work

<div runat="server" class="tooltip" id="divHowTo" style="display: inline-block; width:75px" data-tip="If you have problems: &#013;&#010;
        1.) Enter a users id &#013;&#010;
        2.) Choose a corresponding domain for the pin  &#013;&#010;
        3.) Verify resolved name is correct  &#013;&#010;
        4.) (If adding) Browse for Picture (jpg/png format) (square resolution) (240px X 240px or larger)  &#013;&#010;
        5.) Choose a button to add or delete or view or save or clear " >
    <asp:Image ID="imgHowTo" runat="server" ImageUrl="Images/howTo1s.jpg"  Height="73px" Width="73px"/>

    </div>

with the class of (in between < style> and < /style>)

    .tooltip {
                display:inline-block;
                width:64px;
                height:64px;
                position:relative;
                margin:25px;
                background-repeat: no-repeat;
                background-position:50% 50%;
                background-size:100%;
                text-align:center;
                line-break:auto;
                white-space:pre-line;
            }
    .tooltip:hover:after {
                display:inline-block;
                position:absolute;
                top:-25px;
                left:50%;
                height:400px;
                content: attr(data-tip);
                font:bold 10px/14px Arial, sans-serif;
                background:#f0f0f0;
                color:#333;
                white-space:pre-line;
                border:1px solid #665;
                padding:2px 4px;
                width:150px;
                margin:0 0 0 -75px;
                border-radius:3px;
                line-break:auto;
            }
    .tooltip:hover:before {
                border-top: 10px solid #665;
                border-top: 10px solid #665;
                margin-top: 5px;
                content: "";
                position: absolute;
                border-left: 5px solid transparent;
                border-right: 10px solid transparent;
                top:-15px;
                left: 50%;
                margin-left: -10px;
                line-break:auto;
                white-space:pre-line;
            }