selectable tooltip for Gridview rows.

Question

I need help making selectable/copyable tooltip for a grid. Here is the code from Aspx file.

     <asp:GridView ID="gridView" runat="server" 
                AutoGenerateColumns="false"
                 onrowdatabound="gridView_RowDataBound" 
                 EmptyDataText="No Records found."
                 AllowSorting="True"
      <Columns>
         <asp:CommandField visible="false" ShowEditButton="false" ShowCancelButton="false" ShowDeleteButton="false" />
        <asp:TemplateField HeaderText="ColumnID" Visible="false">
         <ItemTemplate>
         <asp:Label ID="ColumnIDLabel" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ColumnID") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                      <asp:TemplateField HeaderText="Account Number">
                                        <ItemTemplate>
                                         <asp:Label ID="AccountNumberlabel" ReadOnly='true' runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "hashedAccount") %>' ></asp:Label>                                                                       </ItemTemplate> </asp:TemplateField>                                      
       </Columns>
<asp:GridView> 

I am adding tooltip from codebehind file.

   Protected Sub gridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)           
If e.Row.RowType = DataControlRowType.DataRow Then
            If User.HasAttribute("Access", "Enable") Then
                e.Row.ToolTip = e.Row.DataItem.Row.ItemArray(1)
            End If
        End If

I am able to see that the tooltip is loading correct data. but I am not able to select the tooltip. How do I make the Tooltip selectable. Any suggestions would be appreciated.

Answer 1

I used model popup resolved the issue. I added doubleclick event in Rowdatabound

 Protected Sub gridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)           
If e.Row.RowType = DataControlRowType.DataRow Then
            If User.HasAttribute("Access", "Enable") Then
                e.Row.Attributes.Add("ondblclick", "PopUpMessege(" + e.Row.DataItem.Row.ItemArray(1) + ")")
                e.Row.ToolTip = e.Row.DataItem.Row.ItemArray(1)
            Else
                e.Row.Attributes.Add("ondblclick", "PopUpMessege('You do not have access to view Account Number')")
            End If
        End If

Added myModel Div in aspx page

        <!-- Modal content -->
        <div class="modal-content">
            <p style="font-weight: bold; text-align: center; color: white; background-color: #337AB7;">PopUP info to copy</p>
            <span id="closespan" class="close">&times;</span>
            <p id="lblpopUpInfo"></p>
        </div>
    </div>

Jquery Script

function PopUpMessege(msg) {
    $('#myModal').css('display', 'inline');
    document.getElementById("lblpopUpInfo").innerText = msg;
}    
$(document).ready(function () {
    if ($('#closespan').length > 0) {
        $('#closespan').click(function () {
            $('#myModal').css('display', 'none');
        });
    }
});

And CSS

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 250px;
}

/* The Close Button */
.close {
    color: #3D3D3D;
    float: right;
    font-size: 28px;
    font-weight: bold;
    width:30px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}