When I hover over my username on the site it drops down a box. I'm wanting to try and implement something similar can someone lead me in the direction of how to replicate this? Thanks!
Just the concept:
mouseover
(and mouseout
) events.mouseover
event is triggered, you create/show some HTML element that is positioned there using DOM manipulation.mouseout
is triggered for the box/link, hide the element again.You can use JQuery (or any other framework) to simplify a lot of that.
You can try this jQuery plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Jquery have many plugins to implement popups.Watch here http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
It should very easy follow the below steps
1) Make your html ready
2) Make it absolute positioned
3) Listen to jquery mouseover even ad mouseover event.
4) Get the offset value off parent elemet which is mouseover event
5) Get the left val and Top Val of the mosueover from Offset val.
6) Do a .show on the absolute div item and position it next to the parent elemet