Andreas Granig
11 years ago
parent
710b009859
commit
cbac066314
@ -1,60 +1,105 @@
|
||||
.tooltip, .arrow:after {
|
||||
background: black;
|
||||
border: 2px solid white;
|
||||
.tooltip,
|
||||
.arrow-top:after, .arrow-bottom:after, .arrow-left:after, .arrow-right:after {
|
||||
background: white;
|
||||
border: 1px solid #008800;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 2px 10px;
|
||||
color: #008800;
|
||||
border-radius: 1px;
|
||||
text-align: center;
|
||||
font: bold 14px "Helvetica Neue", Sans-Serif;
|
||||
font-stretch: condensed;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 0 7px black;
|
||||
}
|
||||
.arrow {
|
||||
width: 70px;
|
||||
height: 16px;
|
||||
line-height:14px;
|
||||
font: 12px "Open Sans", Sans-Serif;
|
||||
box-shadow: 0 0 3px black;
|
||||
}
|
||||
|
||||
.arrow-top {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
bottom: -16px;
|
||||
margin-left: -25px;
|
||||
bottom: -10px;
|
||||
}
|
||||
.arrow-top:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: -25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.arrow-bottom {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
top: -10px;
|
||||
}
|
||||
.arrow-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: -25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
width: 10px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
right: -10px;
|
||||
}
|
||||
.arrow-left:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: 11px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
width: 10px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
left: -10px;
|
||||
}
|
||||
.arrow:after {
|
||||
.arrow-right:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: -20px;
|
||||
right: -25px;
|
||||
top: 11px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
-webkit-box-shadow: 6px 5px 9px -9px black,
|
||||
5px 6px 9px -9px black;
|
||||
-moz-box-shadow: 6px 5px 9px -9px black,
|
||||
5px 6px 9px -9px black;
|
||||
box-shadow: 6px 5px 9px -9px black,
|
||||
5px 6px 9px -9px black;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
}
|
||||
.tooltip.active {
|
||||
opacity: 1;
|
||||
margin-top: 5px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-ms-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
}
|
||||
.tooltip.out {
|
||||
opacity: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
@ -1,65 +1,50 @@
|
||||
// IIFE to ensure safe use of $
|
||||
(function( $ ) {
|
||||
|
||||
// Create plugin
|
||||
$.fn.tooltips = function(el) {
|
||||
|
||||
var $tooltip,
|
||||
$body = $('body'),
|
||||
$el;
|
||||
|
||||
// Ensure chaining works
|
||||
return this.each(function(i, el) {
|
||||
|
||||
$el = $(el).attr("data-tooltip", i);
|
||||
var pos = $el.attr("data-pos");
|
||||
if(pos == undefined) pos = "top";
|
||||
console.log("pos at " + i + " is ", pos);
|
||||
|
||||
// Make DIV and append to page
|
||||
//var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("body");
|
||||
var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.text() + '<div class="arrow"></div></div>').appendTo("body");
|
||||
var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.html() + '<div class="arrow-' + pos + '"></div></div>').appendTo("body");
|
||||
$el.html('');
|
||||
|
||||
// Position right away, so first appearance is smooth
|
||||
var linkPosition = $el.position();
|
||||
|
||||
console.log(linkPosition);
|
||||
console.log("w="+$tooltip.outerWidth()+",h="+$tooltip.outerHeight());
|
||||
var top, left;
|
||||
switch(pos) {
|
||||
case "top":
|
||||
top = linkPosition.top + 10 - $tooltip.outerHeight();
|
||||
left = linkPosition.left + 48 - $tooltip.outerWidth()/2;
|
||||
break;
|
||||
case "bottom":
|
||||
top = linkPosition.top + 3 + $tooltip.outerHeight();
|
||||
left = linkPosition.left + 48 - $tooltip.outerWidth()/2;
|
||||
break;
|
||||
case "left":
|
||||
top = linkPosition.top + 17 - ($tooltip.outerHeight()/2);
|
||||
left = linkPosition.left + 41 - $tooltip.outerWidth();
|
||||
break;
|
||||
case "right":
|
||||
top = linkPosition.top + 17 - ($tooltip.outerHeight()/2);
|
||||
left = linkPosition.left + 55;
|
||||
break;
|
||||
}
|
||||
$tooltip.css({
|
||||
top: linkPosition.top - $tooltip.outerHeight() - 13,
|
||||
left: linkPosition.left - ($tooltip.width()/2)
|
||||
top: top,
|
||||
left: left
|
||||
});
|
||||
|
||||
// Mouseenter
|
||||
.hover(function() {
|
||||
|
||||
$el = $(this);
|
||||
|
||||
$tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');
|
||||
|
||||
// Reposition tooltip, in case of page movement e.g. screen resize
|
||||
var linkPosition = $el.position();
|
||||
|
||||
$tooltip.css({
|
||||
top: linkPosition.top - $tooltip.outerHeight() - 13,
|
||||
left: linkPosition.left - ($tooltip.width()/2)
|
||||
});
|
||||
|
||||
// Adding class handles animation through CSS
|
||||
$tooltip.addClass("active");
|
||||
|
||||
// Mouseleave
|
||||
}, function() {
|
||||
|
||||
$el = $(this);
|
||||
|
||||
// Temporary class for same-direction fadeout
|
||||
$tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");
|
||||
|
||||
// Remove all classes
|
||||
setTimeout(function() {
|
||||
$tooltip.removeClass("active").removeClass("out");
|
||||
}, 300);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
||||
Loading…
Reference in new issue