How to display user details using popover bootstrap without using click event bootstrap modal?

See more:

Razor

MVC6

ASP.NET-Core

I work on razor page asp.net .I face issue I can't show user details using mouse or popover without using bootstrap modal

I pass user details using temp data from model to view and data passed success
can you apply popover for sample code attached

What I have tried:

I work on razor page asp.net .I face issue I can't show user details using mouse or popover without using bootstrap modal

what i do as below

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userDetailsModal">
View User Details
    </button>
modal bootstrap used 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>User Name: @TempData["UserName"]</p>
                    <p>User Role: @TempData["UserRole"]</p>
                    <p>Environment: @TempData["Environment"]</p>
                    <p>User ID: @TempData["UserId"]</p>
                    <p>StatusCode: @TempData["StatusCode"]</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>