www.js.vendor.jquery.tooltipster.swing.js Maven / Gradle / Ivy
/*
Tooltipster 2.1.4 | 6/1/13
A rockin' custom tooltip jQuery plugin
Developed by: Caleb Jacob - calebjacob.com
Copyright (C) 2013 Caleb Jacob
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
;(function ($, window, document, undefined) {
var pluginName = "tooltipster",
defaults = {
animation: 'fade',
arrow: true,
arrowColor: '',
content: '',
delay: 200,
fixedWidth: 0,
maxWidth: 0,
functionBefore: function(origin, continueTooltip) {
continueTooltip();
},
functionReady: function(origin, tooltip) {},
functionAfter: function(origin) {},
icon: '(?)',
iconDesktop: false,
iconTouch: false,
iconTheme: '.tooltipster-icon',
interactive: false,
interactiveTolerance: 350,
offsetX: 0,
offsetY: 0,
onlyOne: true,
position: 'top',
speed: 350,
timer: 0,
theme: '.tooltipster-default',
touchDevices: true,
trigger: 'hover',
updateAnimation: true
};
function Plugin(element, options) {
this.element = element;
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// we'll use this to detect for mobile devices
function is_touch_device() {
return !!('ontouchstart' in window);
}
// detecting support for CSS transitions
function supportsTransitions() {
var b = document.body || document.documentElement;
var s = b.style;
var p = 'transition';
if(typeof s[p] == 'string') {return true; }
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
p = p.charAt(0).toUpperCase() + p.substr(1);
for(var i=0; i'+ this.options.icon +'');
icon.insertAfter($this);
$this.data('tooltipsterIcon', icon);
$this = icon;
}
// first, strip the title off of the element and set it as a data attribute to prevent the default tooltips from popping up
var tooltipsterContent = $.trim(object.options.content).length > 0 ? object.options.content : $this.attr('title');
$this.data('tooltipsterContent', tooltipsterContent);
$this.removeAttr('title');
// if this is a touch device, add some touch events to launch the tooltip
if ((this.options.touchDevices == true) && (touchDevice) && ((this.options.trigger == 'click') || (this.options.trigger == 'hover'))) {
$this.bind('touchstart', function(element, options) {
object.showTooltip();
});
}
// if this is a desktop, deal with adding regular mouse events
else {
// if hover events are set to show and hide the tooltip, attach those events respectively
if (this.options.trigger == 'hover') {
$this.on('mouseenter.tooltipster', function() {
object.showTooltip();
});
// if this is an interactive tooltip, delay getting rid of the tooltip right away so you have a chance to hover on the tooltip
if (this.options.interactive == true) {
$this.on('mouseleave.tooltipster', function() {
var tooltipster = $this.data('tooltipster');
var keepAlive = false;
if ((tooltipster !== undefined) && (tooltipster !== '')) {
tooltipster.mouseenter(function() {
keepAlive = true;
});
tooltipster.mouseleave(function() {
keepAlive = false;
});
var tolerance = setTimeout(function() {
if (keepAlive == true) {
tooltipster.mouseleave(function() {
object.hideTooltip();
});
}
else {
object.hideTooltip();
}
}, object.options.interactiveTolerance);
}
else {
object.hideTooltip();
}
});
}
// if this is a dumb tooltip, just get rid of it on mouseleave
else {
$this.on('mouseleave.tooltipster', function() {
object.hideTooltip();
});
}
}
// if click events are set to show and hide the tooltip, attach those events respectively
if (this.options.trigger == 'click') {
$this.on('click.tooltipster', function() {
if (($this.data('tooltipster') == '') || ($this.data('tooltipster') == undefined)) {
object.showTooltip();
}
else {
object.hideTooltip();
}
});
}
}
}
},
showTooltip: function(options) {
var $this = $(this.element);
var object = this;
// detect if we're actually dealing with an icon or the origin itself
if ($this.data('tooltipsterIcon') !== undefined) {
$this = $this.data('tooltipsterIcon');
}
// continue if this tooltip is enabled
if (!$this.hasClass('tooltipster-disable')) {
// if we only want one tooltip open at a time, close all tooltips currently open
if (($('.tooltipster-base').not('.tooltipster-dying').length > 0) && (object.options.onlyOne == true)) {
$('.tooltipster-base').not('.tooltipster-dying').not($this.data('tooltipster')).each(function() {
$(this).addClass('tooltipster-kill');
var origin = $(this).data('origin');
origin.data('plugin_tooltipster').hideTooltip();
});
}
// delay the showing of the tooltip according to the delay time
$this.clearQueue().delay(object.options.delay).queue(function() {
// call our custom function before continuing
object.options.functionBefore($this, function() {
// if this origin already has its tooltip open, keep it open and do nothing else
if (($this.data('tooltipster') !== undefined) && ($this.data('tooltipster') !== '')) {
var tooltipster = $this.data('tooltipster');
if (!tooltipster.hasClass('tooltipster-kill')) {
var animation = 'tooltipster-'+ object.options.animation;
tooltipster.removeClass('tooltipster-dying');
if (transitionSupport == true) {
tooltipster.clearQueue().addClass(animation +'-show');
}
// if we have a timer set, we need to reset it
if (object.options.timer > 0) {
var timer = tooltipster.data('tooltipsterTimer');
clearTimeout(timer);
timer = setTimeout(function() {
tooltipster.data('tooltipsterTimer', undefined);
object.hideTooltip();
}, object.options.timer);
tooltipster.data('tooltipsterTimer', timer);
}
// if this is a touch device, hide the tooltip on body touch
if ((object.options.touchDevices == true) && (touchDevice)) {
$('body').bind('touchstart', function(event) {
if (object.options.interactive == true) {
var touchTarget = $(event.target);
var closeTooltip = true;
touchTarget.parents().each(function() {
if ($(this).hasClass('tooltipster-base')) {
closeTooltip = false;
}
});
if (closeTooltip == true) {
object.hideTooltip();
$('body').unbind('touchstart');
}
}
else {
object.hideTooltip();
$('body').unbind('touchstart');
}
});
}
}
}
// if the tooltip isn't already open, open that sucker up!
else {
// disable horizontal scrollbar to keep overflowing tooltips from jacking with it
// $('body').css('overflow-x', 'hidden');
// get the content for the tooltip
var content = $this.data('tooltipsterContent');
// get some other settings related to building the tooltip
var theme = object.options.theme;
var themeClass = theme.replace('.', '');
var animation = 'tooltipster-'+object.options.animation;
var animationSpeed = '-webkit-transition-duration: '+ object.options.speed +'ms; -webkit-animation-duration: '+ object.options.speed +'ms; -moz-transition-duration: '+ object.options.speed +'ms; -moz-animation-duration: '+ object.options.speed +'ms; -o-transition-duration: '+ object.options.speed +'ms; -o-animation-duration: '+ object.options.speed +'ms; -ms-transition-duration: '+ object.options.speed +'ms; -ms-animation-duration: '+ object.options.speed +'ms; transition-duration: '+ object.options.speed +'ms; animation-duration: '+ object.options.speed +'ms;';
var fixedWidth = object.options.fixedWidth > 0 ? 'width:'+ Math.round(object.options.fixedWidth) +'px;' : '';
var maxWidth = object.options.maxWidth > 0 ? 'max-width:'+ Math.round(object.options.maxWidth) +'px;' : '';
var pointerEvents = object.options.interactive == true ? 'pointer-events: auto;' : '';
// build the base of our tooltip
var tooltipster = $('');
var tooltipsterHTML = $('');
tooltipsterHTML.html(content);
tooltipster.append(tooltipsterHTML);
tooltipster.appendTo('body');
// attach the tooltip to its origin
$this.data('tooltipster', tooltipster);
tooltipster.data('origin', $this);
// do all the crazy calculations and positioning
object.positionTooltip();
// call our custom callback since the content of the tooltip is now part of the DOM
object.options.functionReady($this, tooltipster);
// animate in the tooltip
if (transitionSupport == true) {
tooltipster.addClass(animation + '-show');
}
else {
tooltipster.css('display', 'none').removeClass(animation).fadeIn(object.options.speed);
}
// check to see if our tooltip content changes or its origin is removed while the tooltip is alive
var currentTooltipContent = content;
var contentUpdateChecker = setInterval(function() {
var newTooltipContent = $this.data('tooltipsterContent');
// if this tooltip's origin is removed, remove the tooltip
if ($('body').find($this).length == 0) {
tooltipster.addClass('tooltipster-dying');
object.hideTooltip();
}
// if the content changed for the tooltip, update it
else if ((currentTooltipContent !== newTooltipContent) && (newTooltipContent !== '')) {
currentTooltipContent = newTooltipContent;
// set the new content in the tooltip
tooltipster.find('.tooltipster-content').html(newTooltipContent);
// if we want to play a little animation showing the content changed
if (object.options.updateAnimation == true) {
if (supportsTransitions()) {
tooltipster.css({
'width': '',
'-webkit-transition': 'all ' + object.options.speed + 'ms, width 0ms, height 0ms, left 0ms, top 0ms',
'-moz-transition': 'all ' + object.options.speed + 'ms, width 0ms, height 0ms, left 0ms, top 0ms',
'-o-transition': 'all ' + object.options.speed + 'ms, width 0ms, height 0ms, left 0ms, top 0ms',
'-ms-transition': 'all ' + object.options.speed + 'ms, width 0ms, height 0ms, left 0ms, top 0ms',
'transition': 'all ' + object.options.speed + 'ms, width 0ms, height 0ms, left 0ms, top 0ms'
}).addClass('tooltipster-content-changing');
// reset the CSS transitions and finish the change animation
setTimeout(function() {
tooltipster.removeClass('tooltipster-content-changing');
// after the changing animation has completed, reset the CSS transitions
setTimeout(function() {
tooltipster.css({
'-webkit-transition': object.options.speed + 'ms',
'-moz-transition': object.options.speed + 'ms',
'-o-transition': object.options.speed + 'ms',
'-ms-transition': object.options.speed + 'ms',
'transition': object.options.speed + 'ms'
});
}, object.options.speed);
}, object.options.speed);
}
else {
tooltipster.fadeTo(object.options.speed, 0.5, function() {
tooltipster.fadeTo(object.options.speed, 1);
});
}
}
// reposition and resize the tooltip
object.positionTooltip();
}
// if the tooltip is closed or origin is removed, clear this interval
if (($('body').find(tooltipster).length == 0) || ($('body').find($this).length == 0)) {
clearInterval(contentUpdateChecker);
}
}, 200);
// if we have a timer set, let the countdown begin!
if (object.options.timer > 0) {
var timer = setTimeout(function() {
tooltipster.data('tooltipsterTimer', undefined);
object.hideTooltip();
}, object.options.timer + object.options.speed);
tooltipster.data('tooltipsterTimer', timer);
}
// if this is a touch device, hide the tooltip on body touch
if ((object.options.touchDevices == true) && (touchDevice)) {
$('body').bind('touchstart', function(event) {
if (object.options.interactive == true) {
var touchTarget = $(event.target);
var closeTooltip = true;
touchTarget.parents().each(function() {
if ($(this).hasClass('tooltipster-base')) {
closeTooltip = false;
}
});
if (closeTooltip == true) {
object.hideTooltip();
$('body').unbind('touchstart');
}
}
else {
object.hideTooltip();
$('body').unbind('touchstart');
}
});
}
// if this is an interactive tooltip activated by a click, close the tooltip when you hover off the tooltip
tooltipster.mouseleave(function() {
object.hideTooltip();
});
}
});
$this.dequeue();
});
}
},
hideTooltip: function(options) {
var $this = $(this.element);
var object = this;
// detect if we're actually dealing with an icon or the origin itself
if ($this.data('tooltipsterIcon') !== undefined) {
$this = $this.data('tooltipsterIcon');
}
var tooltipster = $this.data('tooltipster');
// if the origin has been removed, find all tooltips assigned to death
if (tooltipster == undefined) {
tooltipster = $('.tooltipster-dying');
}
// clear any possible queues handling delays and such
$this.clearQueue();
if ((tooltipster !== undefined) && (tooltipster !== '')) {
// detect if we need to clear a timer
var timer = tooltipster.data('tooltipsterTimer');
if (timer !== undefined) {
clearTimeout(timer);
}
var animation = 'tooltipster-'+ object.options.animation;
if (transitionSupport == true) {
tooltipster.clearQueue().removeClass(animation +'-show').addClass('tooltipster-dying').delay(object.options.speed).queue(function() {
tooltipster.remove();
$this.data('tooltipster', '');
// $('body').css('overflow-x', '');
// finally, call our custom callback function
object.options.functionAfter($this);
});
}
else {
tooltipster.clearQueue().addClass('tooltipster-dying').fadeOut(object.options.speed, function() {
tooltipster.remove();
$this.data('tooltipster', '');
// $('body').css('overflow-x', '');
// finally, call our custom callback function
object.options.functionAfter($this);
});
}
}
},
positionTooltip: function(options) {
var $this = $(this.element);
var object = this;
// detect if we're actually dealing with an icon or the origin itself
if ($this.data('tooltipsterIcon') !== undefined) {
$this = $this.data('tooltipsterIcon');
}
if (($this.data('tooltipster') !== undefined) && ($this.data('tooltipster') !== '')) {
// find tooltipster and reset its width
var tooltipster = $this.data('tooltipster');
tooltipster.css('width', '');
// find variables to determine placement
var windowWidth = $(window).width();
var containerWidth = $this.outerWidth(false);
var containerHeight = $this.outerHeight(false);
var tooltipWidth = tooltipster.outerWidth(false);
var tooltipInnerWidth = tooltipster.innerWidth() + 1; // this +1 stops FireFox from sometimes forcing an additional text line
var tooltipHeight = tooltipster.outerHeight(false);
var offset = $this.offset();
var offsetTop = offset.top;
var offsetLeft = offset.left;
var resetPosition = undefined;
// if this is an tag inside a © 2015 - 2025 Weber Informatics LLC | Privacy Policy