123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423 |
- /*!
- * tipso - A Lightweight Responsive jQuery Tooltip Plugin v1.0.1
- * Copyright (c) 2014 Bojan Petkovski
- * http://tipso.object505.com
- * Licensed under the MIT license
- * http://object505.mit-license.org/
- */
- ;(function($, window, document, undefined) {
- var pluginName = "tipso",
- defaults = {
- speed : 400,
- background : '#3498db',
- color : '#ffffff',
- position : 'top',
- width : 200,
- delay : 200,
- offsetX : 0,
- offsetY : 0,
- content : null,
- ajaxContentUrl : null,
- useTitle : true,
- onBeforeShow : null,
- onShow : null,
- onHide : null
- };
- function Plugin(element, options) {
- this.element = $(element);
- this.settings = $.extend({}, defaults, options);
- this._defaults = defaults;
- this._name = pluginName;
- this._title = this.element.attr('title');
- this.mode = 'hide';
- this.init();
- }
- $.extend(Plugin.prototype, {
- init: function() {
- var obj = this,
- $e = this.element;
- $e.addClass('tipso_style').removeAttr('title');
- if (isTouchSupported()) {
- $e.on('click' + '.' + pluginName, function(e) {
- obj.mode == 'hide' ? obj.show() : obj.hide();
- e.stopPropagation();
- });
- $(document).on('click', function() {
- if (obj.mode == 'show') {
- obj.hide();
- }
- });
- } else {
- $e.on('mouseover' + '.' + pluginName, function() {
- obj.show();
- });
- $e.on('mouseout' + '.' + pluginName, function() {
- obj.hide();
- });
- }
- },
- tooltip: function() {
- if (!this.tipso_bubble) {
- this.tipso_bubble = $(
- '<div class="tipso_bubble"><div class="tipso_content"></div><div class="tipso_arrow"></div></div>'
- );
- }
- return this.tipso_bubble;
- },
- show: function() {
- var tipso_bubble = this.tooltip(),
- obj = this,
- $win = $(window);
- if ($.isFunction(obj.settings.onBeforeShow)) {
- obj.settings.onBeforeShow($(this));
- }
- tipso_bubble.css({
- background: obj.settings.background,
- color: obj.settings.color,
- width: obj.settings.width
- }).hide();
- tipso_bubble.find('.tipso_content').html(obj.content());
- reposition(obj);
- $win.resize(function() {
- reposition(obj);
- });
- obj.timeout = window.setTimeout(function() {
- tipso_bubble.appendTo('body').stop(true, true).fadeIn(obj.settings
- .speed, function() {
- obj.mode = 'show';
- if ($.isFunction(obj.settings.onShow)) {
- obj.settings.onShow($(this));
- }
- });
- }, obj.settings.delay);
- },
- hide: function() {
- var obj = this,
- tipso_bubble = this.tooltip();
- window.clearTimeout(obj.timeout);
- obj.timeout = null;
- tipso_bubble.stop(true, true).fadeOut(obj.settings.speed,
- function() {
- $(this).remove();
- if ($.isFunction(obj.settings.onHide) && obj.mode == 'show') {
- obj.settings.onHide($(this));
- }
- obj.mode = 'hide';
- });
- },
- destroy: function() {
- var $e = this.element;
- $e.off('.' + pluginName);
- $e.removeData(pluginName);
- $e.removeClass('tipso_style').attr('title', this._title);
- },
- content: function() {
- var content,
- $e = this.element,
- obj = this,
- title = this._title;
- if (obj.settings.ajaxContentUrl) {
- content = $.ajax({
- type: "GET",
- url: obj.settings.ajaxContentUrl,
- async: false
- }).responseText;
- } else if (obj.settings.content) {
- content = obj.settings.content;
- } else {
- if (obj.settings.useTitle === true) {
- content = title;
- } else {
- content = $e.data('tipso');
- }
- }
- return content;
- },
- update: function(key, value) {
- var obj = this;
- if (value) {
- obj.settings[key] = value;
- } else {
- return obj.settings[key];
- }
- }
- });
- function isTouchSupported() {
- var msTouchEnabled = window.navigator.msMaxTouchPoints;
- var generalTouchEnabled = "ontouchstart" in document.createElement(
- "div");
- if (msTouchEnabled || generalTouchEnabled) {
- return true;
- }
- return false;
- }
- function realHeight(obj) {
- var clone = obj.clone();
- clone.css("visibility", "hidden");
- $('body').append(clone);
- var height = clone.outerHeight();
- clone.remove();
- return height;
- }
- function reposition(thisthat) {
- var tipso_bubble = thisthat.tooltip(),
- $e = thisthat.element,
- obj = thisthat,
- $win = $(window),
- arrow = 10,
- pos_top, pos_left, diff;
- switch (obj.settings.position) {
- case 'top':
- pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble
- .outerWidth() / 2);
- pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -8
- });
- if (pos_top < $win.scrollTop()) {
- pos_top = $e.offset().top + $e.outerHeight() + arrow;
- tipso_bubble.find('.tipso_arrow').css({
- 'border-bottom-color': obj.settings.background,
- 'border-top-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('bottom');
- } else {
- tipso_bubble.find('.tipso_arrow').css({
- 'border-top-color': obj.settings.background,
- 'border-bottom-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('top');
- }
- break;
- case 'bottom':
- pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble
- .outerWidth() / 2);
- pos_top = $e.offset().top + $e.outerHeight() + arrow;
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -8
- });
- if (pos_top + realHeight(tipso_bubble) > $win.scrollTop() + $win.outerHeight()) {
- pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
- tipso_bubble.find('.tipso_arrow').css({
- 'border-top-color': obj.settings.background,
- 'border-bottom-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('top');
- } else {
- tipso_bubble.find('.tipso_arrow').css({
- 'border-bottom-color': obj.settings.background,
- 'border-top-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass(obj.settings.position);
- }
- break;
- case 'left':
- pos_left = $e.offset().left - tipso_bubble.outerWidth() - arrow;
- pos_top = $e.offset().top + ($e.outerHeight() / 2) - (realHeight(
- tipso_bubble) / 2);
- tipso_bubble.find('.tipso_arrow').css({
- marginTop: -8,
- marginLeft: ''
- });
- if (pos_left < $win.scrollLeft()) {
- pos_left = $e.offset().left + $e.outerWidth() + arrow;
- tipso_bubble.find('.tipso_arrow').css({
- 'border-right-color': obj.settings.background,
- 'border-left-color': 'transparent',
- 'border-top-color': 'transparent',
- 'border-bottom-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('right');
- } else {
- tipso_bubble.find('.tipso_arrow').css({
- 'border-left-color': obj.settings.background,
- 'border-right-color': 'transparent',
- 'border-top-color': 'transparent',
- 'border-bottom-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass(obj.settings.position);
- }
- break;
- case 'right':
- pos_left = $e.offset().left + $e.outerWidth() + arrow;
- pos_top = $e.offset().top + ($e.outerHeight() / 2) - (realHeight(
- tipso_bubble) / 2);
- tipso_bubble.find('.tipso_arrow').css({
- marginTop: -8,
- marginLeft: ''
- });
- if (pos_left + arrow + obj.settings.width > $win.scrollLeft() +
- $win.outerWidth()) {
- pos_left = $e.offset().left - tipso_bubble.outerWidth() - arrow;
- tipso_bubble.find('.tipso_arrow').css({
- 'border-left-color': obj.settings.background,
- 'border-right-color': 'transparent',
- 'border-top-color': 'transparent',
- 'border-bottom-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('left');
- } else {
- tipso_bubble.find('.tipso_arrow').css({
- 'border-right-color': obj.settings.background,
- 'border-left-color': 'transparent',
- 'border-top-color': 'transparent',
- 'border-bottom-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass(obj.settings.position);
- }
- break;
- }
- if (pos_left < $win.scrollLeft() && (obj.settings.position == 'bottom' ||
- obj.settings.position == 'top')) {
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: pos_left - 8
- });
- pos_left = 0;
- }
- if (pos_left + obj.settings.width > $win.outerWidth() && (obj.settings.position ==
- 'bottom' || obj.settings.position == 'top')) {
- diff = $win.outerWidth() - (pos_left + obj.settings.width);
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -diff - 8,
- marginTop: ''
- });
- pos_left = pos_left + diff;
- }
- if (pos_left < $win.scrollLeft() && (obj.settings.position == 'left' ||
- obj.settings.position == 'right')) {
- pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble.outerWidth() /
- 2);
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -8,
- marginTop: ''
- });
- pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
- if (pos_top < $win.scrollTop()) {
- pos_top = $e.offset().top + $e.outerHeight() + arrow;
- tipso_bubble.find('.tipso_arrow').css({
- 'border-bottom-color': obj.settings.background,
- 'border-top-color': 'transparent',
- 'border-left-color': 'transparent',
- 'border-right-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('bottom');
- } else {
- tipso_bubble.find('.tipso_arrow').css({
- 'border-top-color': obj.settings.background,
- 'border-bottom-color': 'transparent',
- 'border-left-color': 'transparent',
- 'border-right-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('top');
- }
- if (pos_left + obj.settings.width > $win.outerWidth()) {
- diff = $win.outerWidth() - (pos_left + obj.settings.width);
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -diff - 8,
- marginTop: ''
- });
- pos_left = pos_left + diff;
- }
- if (pos_left < $win.scrollLeft()) {
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: pos_left - 8
- });
- pos_left = 0;
- }
- }
- if (pos_left + obj.settings.width > $win.outerWidth() && (obj.settings.position ==
- 'left' || obj.settings.position == 'right')) {
- pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble.outerWidth() /
- 2);
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -8,
- marginTop: ''
- });
- pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
- if (pos_top < $win.scrollTop()) {
- pos_top = $e.offset().top + $e.outerHeight() + arrow;
- tipso_bubble.find('.tipso_arrow').css({
- 'border-bottom-color': obj.settings.background,
- 'border-top-color': 'transparent',
- 'border-left-color': 'transparent',
- 'border-right-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('bottom');
- } else {
- tipso_bubble.find('.tipso_arrow').css({
- 'border-top-color': obj.settings.background,
- 'border-bottom-color': 'transparent',
- 'border-left-color': 'transparent',
- 'border-right-color': 'transparent'
- });
- tipso_bubble.removeClass('top bottom left right');
- tipso_bubble.addClass('top');
- }
- if (pos_left + obj.settings.width > $win.outerWidth()) {
- diff = $win.outerWidth() - (pos_left + obj.settings.width);
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: -diff - 8,
- marginTop: ''
- });
- pos_left = pos_left + diff;
- }
- if (pos_left < $win.scrollLeft()) {
- tipso_bubble.find('.tipso_arrow').css({
- marginLeft: pos_left - 8
- });
- pos_left = 0;
- }
- }
- tipso_bubble.css({
- left: pos_left + obj.settings.offsetX,
- top: pos_top + obj.settings.offsetY
- });
- }
- $[pluginName] = $.fn[pluginName] = function(options) {
- var args = arguments;
- if (options === undefined || typeof options === 'object') {
- if (!(this instanceof $)) {
- $.extend(defaults, options);
- }
- return this.each(function() {
- if (!$.data(this, 'plugin_' + pluginName)) {
- $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
- }
- });
- } else if (typeof options === 'string' && options[0] !== '_' && options !==
- 'init') {
- var returns;
- this.each(function() {
- var instance = $.data(this, 'plugin_' + pluginName);
- if (!instance) {
- instance = $.data(this, 'plugin_' + pluginName, new Plugin(
- this, options));
- }
- if (instance instanceof Plugin && typeof instance[options] ===
- 'function') {
- returns = instance[options].apply(instance, Array.prototype.slice
- .call(args, 1));
- }
- if (options === 'destroy') {
- $.data(this, 'plugin_' + pluginName, null);
- }
- });
- return returns !== undefined ? returns : this;
- }
- };
- })(jQuery, window, document);
|