Simple tooltip with jquery and css

Simple jQuery and css code for create tooltip with html content. No need to add any plugin just simple js and css code. You can able to use html tags, text, image etc., in tooltip.

Example for tooltip with jQuery and css:

Example 1:
Check HEREWelcome to VEVLO BLOG Web development blog for simple text tooltip.

Example 2:
Check HEREWelcome to VEVLO BLOG Web development blog
Image here
for tooltip with image and text content. Here is a logo.

How to use simple tooltip:

CSS for tooltip

<style>
.stt-content{display:none;}

/* css for tooltip */
.stt-active{
    display:block;
    position:absolute;
    max-width:350px;
    margin-top:6px;
    border:1px solid #ccc;
    padding:5px;
    z-index:9;
    background:#FFFFFF;
}
</style>

JS code for tooltip

//ADD jQuery FIRST
<script>
$('document').ready(function(){
 $('.stt-main').bind({
  mouseenter: function(e){
   $(this).next().addClass('stt-active').css({'left':$(this).position().left+'px'});
  },
  mouseout: function(){
   $(this).next().removeClass('stt-active');
  }
 });
});
</script>

HTML for tooltip

<div>
    My <a href="http://vevlo.blogspot.com" class="stt-main">TOOLTIP ELEMENT</a>.
    <div class="stt-content">Simple tooltip</div>
    Content continue...........
</div>

<!--CODE DETAIL-->
<!--Add class to your element, where you need tooltip.-->
<DOM_ELEMENT_START class="stt-main"></DOM_ELEMENT_END>

<!--Add tooltip content after end DOM_ELEMENT.-->
<div class="stt-content">TOOLTIP CONTENT</div>