webformstooltipclickablejquery-ui-selectable

selectable tooltip for Gridview rows.


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.


Solution

  • 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;
    }