Without Tooltip Plugin Each Element And Exceptions
Updated on March 24, 2016
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
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/AVvXsEhDp_zOKHxVElHVNX77O0MT54gqBWuyWOt2v8wYoPQ6ylCVx55SR6j-B4omo2IvNeuqKUAeYMAjo0Y_u_Hk0TjWVPcvQKDfGS-NJfoUbcjDOk_xl1VAWrp5zWG3hjClF_Kk5Z2i2dfThNQ/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
0 comments for Without Tooltip Plugin Each Element And Exceptions