selectable tooltip for Gridview rows. - webforms

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">×</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;
}