Without Tooltip Plugin Each Element And Exceptions

From some tooltip I've ever tried, only this time I found the tooltip that really fit in the hearts hehehe .... Unlike most tooltip that use plugins to script a lot and menharuskan using selector class on target, the tooltip this one is really simple and only use jquery is fairly simple. In addition we are free to edit jquery to add to the target element.
See more: http://croptrick.blogspot.com/2014/09/simple-responsive-tooltip-for-all-elements.html
That way we do not need to edit one by one link we've ever made in both the template and the post because it will work on all the links that we have set.
Code HTML
<a href="#" title="Check out Code Chewing &gt;">Code Chewing</a>
<div class="tool" title="Click to open content!">Click here</div>
<input placeholder='Input with title tag' title='Click to search!' type='text'/>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALBM1IddaI6cxxLpFlX9mkiDr_mjz2DB-5mGyxXQtk3jMpi17cVfalCHE7XIzxCe80kGTZLUtTgXDXMrkecYcQeL_XIUDbWtHUGnsYVkT0aVf28Cn5OD3SR-Q3rpy0oHmn7LimExrtRA/s1600/8.png" height="114" title="Title tag of this image" width="220" /> 
Code CSS
.tooltip {display:none;position:absolute;border-radius:5px;box-shadow: 0 2px 10px rgba(0,0,0,.2);background-color:#333;color:#fff;padding:3px 10px;opacity:.9;z-index:10000}
Code Javascript:
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('a,img,input,.menu,.close-menu,.translator,img.related-post-item-thumbnail,a.related-post-item-title').not('.paginator,.paginator span a,#subscribe-box input').hover(function(e){ // Hover event
     var titleText = $(this).attr('title');
    $(this)
      .data('tiptext', titleText)
      .removeAttr('title');
   $('<p class="tooltip"></p>')
    .text(titleText)
    .appendTo('body')
    .css('top', (e.pageY - 10) + 'px')
    .css('left', (e.pageX + 20) + 'px')
    .fadeIn('slow');
  }, function(){ // Hover off event
     $(this).attr('title', $(this).data('tiptext'));
    $('.tooltip').remove();
  }).mousemove(function(e){ // Mouse move event
     $('.tooltip')
      .css('top', (e.pageY - 10) + 'px')
      .css('left', (e.pageX + 20) + 'px');
 });
});
//]]>
</script>
http://www.kompiajaib.com/2014/09/tooltip-tanpa-plugin-tiap-elemen-dan-pengecualian.html

Share this on Google+ Tumblr

Leave a comment

To insert a link, use tag [url=http://your_link]your-link[/url]
To insert the code , use the tag <i rel="code">your-code</i>
The long code can use the tag <i rel="pre">your-long-code</i>
To insert an image , use the code [img]URL Image[/img]
To insert a title , use tag <b rel="h4">Your Title here...</b>
To creat Bold text <strong>Your text here...</strong>
To create Italic text used tag <em>Your text here...</em>

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Cancel