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 >">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
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>