Hi Team
I need some help, i have a form and its working fine. I only need some help, when i select user details after search. their details from form when i mouse hover i must be able to see user email detail. Kindly please assist and thank you.
<!--Modal form popup for user checks details--> <div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="checkDetailsModalLabel">Select People and Groups</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 border-right"> <!-- Left Border: Search --> <div class="d-flex justify-content-between align-items-center mb-3"> <div class="input-group"> <input type="text" id="searchInput" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-outline-secondary" id="searchButton" type="button"> <i class="fas fa-search"></i> Search </button> </div> </div> </div> <!-- Style background for the container --> <style> .light-grey-list li { background-color: #808080; /* Dark Grey color */ padding: 5px; } </style> <!-- List of available users shown --> <div class="border p-3"> <!-- Ordered List Content Here --> <ol class="light-grey-list"> <li> <!-- Users list --> <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;"> All Users <span id="usersCount" style="display: none;">[<span id="totalUsersCount">0</span>]</span> </li> <li> <!-- Active directory users --> <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;"> Active Directory <span id="activeCount" style="display: none;">[<span id="activeDirectoryCount">0</span>]</span> </li> <li> <!-- Organisation users --> <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;"> Organization <span id="orgCount" style="display: none;">[<span id="organizationCount">0</span>]</span> </li> </ol> </div> </div> <div class="col-md-6"> <!-- Right Border: Table --> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="mb-0">Details</h5> </div> <div class="border p-3 table-container table-responsive"> <!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location --> <table class="table table-bordered" id="userTable"> <thead> <tr> <th>Display Name</th> <th>E-mail Address</th> <th>Title</th> <th>Department</th> <th>Presence</th> <th>Work Phone</th> <th>Location</th> </tr> </thead> <tbody> <!-- Table Body Content Here --> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <!-- Add more rows as needed --> </tbody> </table> </div> </div> </div> </div> </div> <!--search for active users at the organisation--> <script> $(document).ready(function () { // Function to handle search button click event $('#searchButton').on('click', function () { var searchTerm = $('#searchInput').val().trim(); if (searchTerm !== '') { // Send an AJAX request to the controller action to search for users $.ajax({ url: '@Url.Action("SearchUsers", "Home")', type: 'POST', dataType: 'json', data: { searchTerm: searchTerm }, success: function (data) { // Clear previous search results $('#userTable tbody').empty(); // Iterate through the retrieved user details and append them to the table $.each(data, function (index, user) { var row = '<tr>' + '<td data-email="' + user.Email + '">' + user.DisplayName + '</td>' + '<td>' + user.Email + '</td>' + '<td>' + user.Title + '</td>' + '<td>' + user.Department + '</td>' + '<td>' + user.Presence + '</td>' + '<td>' + user.WorkPhone + '</td>' + '<td>' + user.Location + '</td>' + '</tr>'; $('#userTable tbody').append(row); }); // Show the modal with search results $('#checkDetailsModal').modal('show'); // Update user counts var totalUsers = data.length; var activeDirectoryCount = data.filter(user => user.Location === 'Active Directory').length; var organizationCount = data.filter(user => user.Location === 'Organization').length; $('#totalUsersCount').text(totalUsers); $('#activeDirectoryCount').text(activeDirectoryCount); $('#organizationCount').text(organizationCount); // Show the user counts with brackets $('#usersCount').toggle(totalUsers > 0); $('#activeCount').toggle(activeDirectoryCount > 0); $('#orgCount').toggle(organizationCount > 0); }, error: function (jqXHR, textStatus, errorThrown) { // Handle error if any console.error('Error:', textStatus, errorThrown); } }); } }); // Function to handle selecting a user from the table $(document).on('click', '#userTable tbody tr', function () { // Remove the 'selected' class from all rows $('#userTable tbody tr').removeClass('selected'); // Add the 'selected' class to the clicked row $(this).addClass('selected'); }); // Function to handle OK button click event $('#okButton').on('click', function () { // Get the selected user's display name and set it in the AuditType input field var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text(); $('#auditor').val(selectedUserDisplayName); // Close the modal $('#checkDetailsModal').modal('hide'); }); // Function to handle modal close event when close button at the top is clicked $('#checkDetailsModal').on('hidden.bs.modal', function () { // Clear the search input field and remove the selected class from all rows when the modal is closed $('#searchInput').val(''); $('#userTable tbody tr').removeClass('selected'); }); // Function to show user email address on mouse hover $(document).on('mouseenter', '#userTable tbody tr td', function () { var email = $(this).data('email'); $(this).attr('title', email); }); }); </script> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="okButton">OK</button> <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelButton">Cancel</button> </div> </div> </div> </div>