Profile when Mouse Over

Hi,

How can I do something like display a profile while mouseover an item? Either in HTML or JavaScript.




I have the following:

<a href="#" onmouseover="showDetails()" onmouseout="hideDetails()">John</a>

How could I building the profile itself? Developing the showDetail() function do display:



Thank you very much

See images attached

 

i am not sure what exactly you want, but here is what i will do to display profile for showDetails() function.

   
<a href="#" onmouseover="showDetails(this)" onmouseout="hideDetails()">John</a>
        <div id="profilePopup">
            <div class="left">
                <div>
                    <div class="adjacent">Name: </div><div class="adjacent" id="firstName"></div>
                </div>
                <div>
                    <div class="adjacent">Last Name: </div><div class="adjacent" id="lastName"></div>
                </div>
                <div>
                    <div class="adjacent">DOB: </div><div class="adjacent" id="dob"></div>
                </div>
                <div>
                    <div class="adjacent">Place of Birth: </div><div class="adjacent" id="placeofBirth"></div>
                </div>
            </div>
            <div class="right">
                <img src="http://orig03.deviantart.net/e1d4/f/2012/241/8/8/profile_picture_by_pratikartist-d5cuu1m.jpg" width="35" height="35" alt="profile pic"/>
            </div>
        </div>

HTML:

then here's my JavaScript

  
function showDetails(ele) {
                var brect = ele.getBoundingClientRect();
                var top = brect.y ? brect.y : brect.top;
                var left = brect.x ? brect.x : brect.left;
                var width = brect.width;
                var height = brect.height;

                var padding_left = 5;
                left += width + padding_left;

                var profilePopup = document.getElementById('profilePopup');
                profilePopup.style.display = 'block';
                profilePopup.style.left = left + 'px';
                profilePopup.style.top = top + 'px';

                var data = {
                    firstName: 'Rehan',
                    lastName: 'Khalid',
                    dob: '05/15/1986',
                    placeofBirth: 'Lahore'
                };
                var firstName = document.getElementById('firstName');
                firstName.innerHTML = data.firstName;

                var lastName = document.getElementById('lastName');
                lastName.innerHTML = data.lastName;

                var dob = document.getElementById('dob');
                dob.innerHTML = data.dob;

                var placeofBirth = document.getElementById('placeofBirth');
                placeofBirth.innerHTML = data.placeofBirth;
            }
            function hideDetails() {             
                var profilePopup = document.getElementById('profilePopup');
                profilePopup.style.display = 'none';
            }

Code (JavaScript):

lastly , here is my Css

 
#profilePopup{
                display: none;
                position: absolute;
                z-index: 100;              
                border: 2px solid #385D8A;
                padding: 5px;
                background-color: #DCE6F2;
            }
            .adjacent {
                display: inline-block;
                margin-left: 2px;
            }
            .right {
                float: right;
            }
            .left {
                float: left;
            }

Code (CSS):

*now important point is , you have to make a mechanism (structure) to get user data. like, you can pass 'id' of user in showdetail() and then fetch the user data on basis of that id.

* here is a demo video of my code , you can see its working
http://screencast.com/t/LjxRF66fCG2

Hope this helps