单击图像按钮时工具提示保持可见

Question

I have an ImageButton with a tooltip. On clicking the button, the tooltip stays visible and sticks to the mouse on the page. I want the tooltip to disappear once the button has been clicked but can't find a way to do this.

Any advice would be appreciated! markup:

<asp:TemplateField HeaderText="Mark as Read">
    <ItemTemplate>
        <asp:ImageButton ID="img_markAsRead" runat="server" ImageUrl="img/icons/eye.png" CssClass="tooltip" Width="20"  ToolTip="Mark this Notification as Read" CommandName="Edit" CommandArgument='<%# Eval("notification_id")%>'/>
    </ItemTemplate>
</asp:TemplateField>

CSS :

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}

Code behind :

protected void grdv_RowEditing(object sender, GridViewEditEventArgs e)
{
    GridViewRow theRow = grdv_notifications.Rows[e.NewEditIndex];
    ImageButton theButton = (ImageButton)theRow.FindControl("img_markAsRead");
    string notificationNo = theButton.CommandArgument;

    #region the clever sql statement to do the updates

    #endregion

    //reload the gridview
    loadGridview();

    //set the notification number       
    MasterPage master = (MasterPage)this.Master;
    master.updateNotificationCount(grdv_notifications.Rows.Count);
}

Answer 1

Based on your jQuery tag and the fact that the class name is "ui-tooltip", I'm guessing that you're using jQuery UI tooltip. In which case, one of the options is "track", which you can set to false when you initialise...

$( document ).tooltip({
  track: false
});

This should be false by default though, so you must be setting it to true .

Answer 2

After racking my brain, the answer was simple.

Adding a Response.Redirect("notifications.aspx");

to reload the page after clicking on the ImageButton reloaded the page and cleared out the tooltip. Simple, but effective!