Skip to content

Instantly share code, notes, and snippets.

@Sympho

Sympho/tips.html

Last active February 19, 2017 02:58
Show Gist options
  • Save Sympho/9d6fd8f78191c00ed3c4bf3a2e33aa37 to your computer and use it in GitHub Desktop.
Save Sympho/9d6fd8f78191c00ed3c4bf3a2e33aa37 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tips.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* plugin's styles */
.tooltip {
display: none;
position: absolute;
padding: 4px 8px 5px;
color: #fff;
font-family: sans-serif;
font-size: 12px;
border-radius: 4px;
background: rgba(0,0,0,.8);
white-space: nowrap;
left: 0;
z-index: 10;
pointer-events: none;
}
.tooltip.active {
display: block;
}
.tooltip.top {
top: 0;
transform: translate(-50%,calc(-100% - 5px));
}
.tooltip:after {
content: '';
position: absolute;
left: 50%;
margin-left: -4px;
border: 8px solid transparent;
border-top: 8px solid rgba(0,0,0,.8);
border-bottom: none;
z-index: 1;
}
.tooltip.top:after {
bottom: 0;
margin-bottom: -8px;
}
/* style */
.tips {
display: inline-block;
margin: 120px 0 0 120px;
}
</style>
</head>
<body>
<div id="wr">
<div class="tips" data-tips-message="Tips for the box 1">box 1</div>
<div class="tips" data-tips-message="Tips for the box 2">box 2</div>
<div class="tips" data-tips-message="Tips for the box 3">box 3</div>
<div class="tips" data-tips-message="Tips for the box 4">box 4</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
;(function($) {
'use strict';
var settings = {
position: 'top',
duration: 1000
};
var methods = {
init: function(options){
settings = $.extend(settings, options);
return this.each(function(){
$(this).css('position', 'relative')
.append(methods.create($(this)))
.on('mouseover', methods.show)
.on('mouseout', methods.hide);
});
},
show: function(){
$(this).find('.tooltip').addClass('active');
},
hide: function(){
var self = $(this),
durationTimeout;
clearTimeout(durationTimeout);
durationTimeout = setTimeout(function(){
self.find('.tooltip').removeClass('active');
},settings.duration);
},
create: function(parent){
return $('<div></div>').addClass('tooltip')
.addClass(settings.position)
.text(parent.data('tips-message'))
}
};
$.fn.tips = function(action){
if (methods[action]) {
return methods[action].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof action === 'object' || !action) {
return methods.init.apply(this, arguments);
} else {
return this;
}
};
})(jQuery);
</script>
<script>
$(function(){
$('[data-tips-message]').tips();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment