');
var middle = $('
');
var pageScroll = getPageScroll(); // Get scroll size
// Default options
var settings = {
duration: 1000,
easing: 500,
position: 'TOP', // Tooltip at the top of self
arrowPosition: 'CENTER',// Results in default
spacing: 0, // Extra spacing to be applyed to tooltip
identifier: null, // Class to be added to the tooltip to apply custom style
snap: false // Tooltip is relative to mouse
};
// User options
$.extend(settings, options);
// Remove all opend tooltips
$('.ad-tooltip-wrap').fadeOut(settings.easing).remove();
// Construct tooltip-header
var middleHeader = tooltip.clone()
.addClass('ad-tooltip-middle-wrap');
var header = tooltip.clone()
.addClass('ad-tooltip-header')
.append(
tooltip.clone()
.addClass('ad-tooltip-left'),
middleHeader,
tooltip.clone()
.addClass('ad-tooltip-right')
);
// Construct tooltip-footer
var middleFooter = tooltip.clone()
.addClass('ad-tooltip-middle-wrap');
var footer = tooltip.clone()
.addClass('ad-tooltip-footer')
.append(
tooltip.clone()
.addClass('ad-tooltip-left'),
middleFooter,
tooltip.clone()
.addClass('ad-tooltip-right')
);
// Construct tooltip
var left = tooltip.clone()
.addClass('ad-tooltip-left');
var right = tooltip.clone()
.addClass('ad-tooltip-right');
var center = tooltip.clone()
.addClass('ad-tooltip-center')
.append(
tooltip.clone()
.addClass('ad-tooltip-content')
.html(str)
);
tooltip.addClass('ad-tooltip').append(left)
.append(center)
.append(right);
wrap.addClass('ad-tooltip-wrap')
.css({
position: 'absolute'
})
.append(
header, tooltip, footer
);
/*
* If an custom identifier was set append
* the user supplied class to the wrap
*/
if (null != settings.identifier){
wrap.addClass(settings.identifier);
}
// Add tooltip to document
$('body:first').append(wrap);
// Set header and footer width (fix for ie7)
header.width(
wrap.width()
);
footer.width(
wrap.width()
);
/*
* Construct tooltip middle-bottom, the arrow will be included
* only if the tooltip will appear above $(this)
*/
var middleLeftElement = middle.clone()
.addClass('ad-tooltip-middle-left');
var middleArrowElement = middle.clone()
.addClass('ad-tooltip-middle-arrow');
var middleRightElement = middle.clone()
.addClass('ad-tooltip-middle-right');
var middleArrow = middle.clone()
.append(
middleLeftElement,
middleArrowElement,
middleRightElement
);
var middlePlain = middle.clone()
.addClass('ad-tooltip-middle-plain');
/*
* Check if y position fits in the screen
* if the tooltip does not fit change position
*/
if ('TOP' == settings.position){
// Force tooltip to bottom
if (wrap.height() > (self.offset().top - pageScroll[1])){
settings.position = 'BOTTOM';
}
}
if ('BOTTOM' == settings.position){
// Force tooltip to bottom
if (wrap.height() > ($(window).height() - ((self.offset().top - pageScroll[1]) + self.height()))){
settings.position = 'TOP';
}
}
/*
* Check if x position fits in the screen
* if the tooltip does not fit change position
*/
if ('LEFT' == settings.position){
// Force tooltip to right
if (wrap.width() > (self.offset().left - pageScroll[0])){
settings.position = 'RIGHT';
}
}
if ('RIGHT' == settings.position){
// Force tooltip to left
if (wrap.width() > ($(window).width() - ((self.offset().left - pageScroll[0]) + self.width()))){
settings.position = 'LEFT';
}
}
/*
* Build the sides of the tooltip according
* to where the arrow should be
*/
switch(settings.position)
{
case 'TOP':
// Arrow down
middleHeader.append(middlePlain.clone());
middleFooter.append(middleArrow);
left.append(middlePlain.clone());
right.append(middlePlain.clone());
break;
case 'BOTTOM':
// Arrow up
middleHeader.append(middleArrow);
middleFooter.append(middlePlain.clone());
left.append(middlePlain.clone());
right.append(middlePlain.clone());
break;
case 'LEFT':
// Arrow Left
middleHeader.append(middlePlain.clone());
middleFooter.append(middlePlain.clone());
left.append(middlePlain.clone());
right.append(middleArrow);
break;
case 'RIGHT':
// Arrow Right
middleHeader.append(middlePlain.clone());
middleFooter.append(middlePlain.clone());
left.append(middleArrow);
right.append(middlePlain.clone());
break;
}
// Estatic fix
if (center.height() < middleArrowElement.height() &&
('LEFT' == settings.position ||
'RIGHT' == settings.position)){
center.height(middleArrowElement.height());
}
// Set left and right height
left.height(
tooltip.height()
);
right.height(
tooltip.height()
);
/*
* position the arrow
*
* The position of the arrow can be set
* with the user options, default is BOTTOM-CENTER
*/
if ('TOP' == settings.position || 'BOTTOM' == settings.position){
/*
* Check if the tooltip fits x
* if not change arrow position
*/
if ('LEFT' == settings.arrowPosition){
// Forse arrow to the right (tooltip to the left)
if (wrap.width() > ($(window).width() - e.clientX)){
settings.arrowPosition = 'RIGHT';
}
}
if ('RIGHT' == settings.arrowPosition){
// Forse arrow to the left (tooltip to the right)
if (wrap.width() > e.clientX){
settings.arrowPosition = 'LEFT';
}
}
// Horizontal arrow positioning
var middleWidth = middleHeader.width();
var arrowWidth = middleArrowElement.width();
var leftWidth = 0;
var rightWidth = 0;
switch (settings.arrowPosition)
{
case 'LEFT':
rightWidth = middleWidth - arrowWidth;
break;
case 'RIGHT':
leftWidth = middleWidth - arrowWidth;
break;
default:
// center bottom or top
leftWidth = (middleWidth - arrowWidth) / 2;
rightWidth = (middleWidth - arrowWidth) / 2;
}
middleLeftElement.width(leftWidth);
middleRightElement.width(rightWidth);
middleArrowElement.css({
'left': leftWidth
});
}
else if ('LEFT' == settings.position || 'RIGHT' == settings.position){
/*
* Check if the tooltip fits x
* if not change arrow position
*/
if ('TOP' == settings.arrowPosition){
// Forse arrow to bottom (tooltip to the top)
if (wrap.height() > ($(window).height() - e.clientY)){
settings.arrowPosition = 'BOTTOM';
}
}
if ('BOTTOM' == settings.arrowPosition){
// Forse arrow to the top (tooltip to the bottom)
if (wrap.height() > e.clientY){
settings.arrowPosition = 'TOP';
}
}
// Vertical arrow positioning
var middleHeight = left.height();
var arrowHeight = middleArrowElement.height();
var leftHeight = 0;
var rightHeight = 0;
switch (settings.arrowPosition)
{
case 'TOP':
rightHeight = middleHeight - arrowHeight;
break;
case 'BOTTOM':
leftHeight = middleHeight - arrowHeight;
break;
default:
// center bottom or top
leftHeight = (middleHeight - arrowHeight) / 2;
rightHeight = (middleHeight - arrowHeight) / 2;
}
middleLeftElement.height(leftHeight);
middleRightElement.height(rightHeight);
if (leftHeight < 0){
leftHeight = 0;
}
middleArrowElement.css({
'top': leftHeight
});
}
// Determin position in document
var tooltipY = wrap.outerHeight();
var tooltipX = wrap.outerWidth();
var middleArrowElementWidth = middleArrowElement.width();
// Calculate default vertical position for tooltip
if (false === settings.snap){
// Default center of tooltip verticaly
var top = parseInt(e.pageY) - ( tooltipY / 2)
} else {
// Calculate vertical middle of self
var top = (parseInt(self.offset().top) + (self.outerHeight() / 2)) - (tooltipY / 2);
}
// Calculate default horizontal position for tooltip
if (false === settings.snap){
// Default center of tooltip horizontaly
var left = parseInt(e.pageX) - ( tooltipX / 2);
} else {
// Calculate horizontal middle of self
var left = (parseInt(self.offset().left) + (self.outerWidth() / 2)) - (tooltipX / 2);
}
if ('TOP' == settings.position || 'BOTTOM' == settings.position){
/*
* If the tooltip will appear on the left or right side
* of the element $(this), position the tooltip relative to the
* arrow horizontaly but not verticaly
*/
if ('LEFT' == settings.arrowPosition){
left += ((tooltipX /2) - middleArrowElementWidth);
}
else if ('RIGHT' == settings.arrowPosition){
left -= ((tooltipX /2) - middleArrowElementWidth);
}
}
else if ('LEFT' == settings.position || 'RIGHT' == settings.position){
/*
* If the tooltip will appear on the left or right side
* of the element $(this), position the tooltip relative to the
* arrow verticaly but not horizontaly
*/
if ('TOP' == settings.arrowPosition){
addTop = (leftHeight > 0) ? leftHeight : rightHeight;
top += (addTop / 2);
}
else if ('BOTTOM' == settings.arrowPosition){
addTop = (leftHeight > 0) ? leftHeight : rightHeight;
top -= (addTop / 2);
}
}
// Apply positioning
if ('TOP' == settings.position){
// Place tooltip at top of element
var top = parseInt(self.offset().top) - parseInt(tooltipY);
wrap.addClass('ad-tooltip-position-top');
// Apply extra spacing
top -= settings.spacing;
}
else if ('BOTTOM' == settings.position){
// Place tooltip at bottom of element
var top = (parseInt(self.offset().top) + parseInt(self.outerHeight()));
wrap.addClass('ad-tooltip-position-bottom');
// Apply extra spacing
top += settings.spacing;
}
else if ('LEFT' == settings.position){
// Place tooltip at left of the element
var left = (parseInt(self.offset().left) - parseInt(tooltipX));
wrap.addClass('ad-tooltip-position-left');
// Apply extra spacing
left -= (settings.spacing);
}
else if ('RIGHT' == settings.position){
// Place tooltip at right of the element
var left = (parseInt(self.offset().left) + parseInt(self.outerWidth()));
wrap.addClass('ad-tooltip-position-right');
// Apply extra spacing
left += (settings.spacing);
}
wrap.css({
top: top,
left: left
});
self.mouseleave(function(){
// Fadeout tooltip after duration
t = setTimeout(function() {
wrap.fadeOut(settings.easing);
}, (settings.duration + settings.easing));
});
// Fadeout tooltip on document click
$(document).bind('click', function(event){
var el = '.ad-tooltip-wrap';
if($(event.target).is(':not('+ el +')') && $(event.target).parents(el).length == 0){
clearTimeout(t);
wrap.fadeOut(settings.easing);
}
});
// Fadeout tooltip on window resize
$(window).resize(function(){
wrap.hide(0);
});
// Clear fadeout action on tooltip hover
wrap.hover(
function() {
clearTimeout(t);
}, function() {
wrap.fadeOut(settings.easing);
});
// Animate tooltip
wrap.fadeTo(settings.easing, 0.9);
});
}