Tooltip on div Hover using onmouseover and onmouseout events

Here i am showing you how to create your own style tooltip in jquery. Its very simple to create different type of tooltip by changing it design style. 

Screen 1

Here we are calling a jquery function on hover of div and call another function after hover out to hide that div.
We are using two event to call jquery function:

1. onmouseover
2. onmouseout

OnMouseOver - The onmouseover event fires when the mouse pointer go to the boundaries of the target object.

OnMouseOut - The onmouseout event fires when the mouse pointer leaves the boundaries of the target object. 

Screen 2

CSS:

//CSS for hover div style
<style type="text/css">
        .hoverContiner
        {
            width: 215px;
            height: auto;
            margin-top: 20px;
            position: absolute;
            display: none;
            z-index: 10000;
            font-family: Arial;
        }
        .hoverDivSyle
        {
            float: left;
            width: 11px;
            height: 50px;
            background-image: url('Images/txt-corner.png');
            background-repeat: no-repeat;
            background-position: left 12px;
            position: absolute;
            left: -10px;
        }
        .hoverTextStyle
        {
            float: left;
            width: 180px;
            height: auto;
            background-color: #FFFFFF;
            border: solid 1px #cbcbcb;
            padding: 15px 10px 15px 10px;
            font-family: Arial;
            font-size: 12px;
            color: #222222;
            overflow: hidden;
        }
    </style>

HTML:

<div align="center">
        <h1 style="font-family: Arial; margin-bottom: 80px;">
            Tooltip On div Hover using onmouseover and onmouseout events</h1>
        //Calling function onmouseover and onmouseout
       // HoverDetails is the function which we need to pass current div id and message that you want to display in tooltip
        <div class="QuestionImg" id="divRoleDetails" onmouseover="HoverDetails(this.id,'Lorem ipsum dolor sit amet, cons ectet uer adipiscing elit. Lorem ipsum dolor sit amet, co nsect tuer adipiscing elit.');"
            onmouseout="HideHoverDetails();" style="background-color: rgb(152, 0, 0); height: 30px;
            padding-top: 10px; width: 150px; text-align: center; cursor:pointer; font-family: Arial; color: White;">
            Hover Me
        </div>
        //Hover Details div
        <div id="divHoverDetails" class="hoverContiner">
            <div class="hoverDivSyle">
            </div>
            <div id="divHoverDetailsText" class="hoverTextStyle">
            </div>
        </div>

Script:

you need to add jquery.min file.
Jquery CDN: http://code.jquery.com/jquery-1.10.2.min.js

<script type="text/javascript">

            function HoverDetails(divID, text) {
                debugger;
                var dvMouseover = $('#divHoverDetails');
                var offset = $('#' + divID).offset();
                var leftValue = offset.left;
                var topValue = offset.top;
                dvMouseover.css({ "top": (topValue - 25) + "px" });
                dvMouseover.css({ "left": (leftValue - -158) + "px" });
                $('#divHoverDetailsText').text(text);
                $(dvMouseover).stop().fadeIn(400); //Show tooltip
            }

            function HideHoverDetails() {
                document.getElementById('divHoverDetails').style.display = "none";
  //Hide tooltip            }

        </script>

Download Link:

Download From Here

 If you have any query feel free to comment it will be appreciated :)