I am currently working on a project in razor page asp.net and I have encountered an issue. I am unable to display user details using a mouse hover or popover without relying on the bootstrap modal.
Here is the code I am using:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userDetailsModal">
View User Details
</button>
I am using the bootstrap modal to display user details:
<div class="modal fade" id="userDetailsModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="userDetailsModalLabel">User Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><strong>User Name:</strong> @TempData["UserName"]</p>
<p><strong>User Role:</strong> @TempData["UserRole"]</p>
<p><strong>Environment:</strong> @TempData["Environment"]</p>
<p><strong>User ID:</strong> @TempData["UserId"]</p>
<p><strong>StatusCode:</strong> @TempData["StatusCode"]</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am passing the user details using temp data from the model to the view and the data is being passed successfully.
Here is an image depicting what I aim to achieve:
https://i.sstatic.net/d4IDS.jpg
Update:
Could you please provide an example of how I can apply a popover to the attached sample code?