tooltip.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. /**
  2. * CHANGES MADE BY YII DEVELOPERS, READ CAREFULLY BEFORE UPGRADING THIS FILE:
  3. * 1. This commit has been used:
  4. * https://github.com/jquerytools/jquerytools/commit/4f3f3f14e83b0ff276a795e9f45400930904adff#src/tooltip/tooltip.js
  5. * 2. Original `$.fn.tooltip` has been changed to `$.fn.tooltip2` to prevent conflict between jQuery UI Tooltip and
  6. * jQuery Tools Tooltip.
  7. *
  8. * @license
  9. * jQuery Tools @VERSION Tooltip - UI essentials
  10. *
  11. * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
  12. *
  13. * http://flowplayer.org/tools/tooltip/
  14. *
  15. * Since: November 2008
  16. * Date: @DATE
  17. */
  18. (function($) {
  19. // static constructs
  20. $.tools = $.tools || {version: '@VERSION'};
  21. $.tools.tooltip = {
  22. conf: {
  23. // default effect variables
  24. effect: 'toggle',
  25. fadeOutSpeed: "fast",
  26. predelay: 0,
  27. delay: 30,
  28. opacity: 1,
  29. tip: 0,
  30. fadeIE: false, // enables fade effect in IE
  31. // 'top', 'bottom', 'right', 'left', 'center'
  32. position: ['top', 'center'],
  33. offset: [0, 0],
  34. relative: false,
  35. cancelDefault: true,
  36. // type to event mapping
  37. events: {
  38. def: "mouseenter,mouseleave",
  39. input: "focus,blur",
  40. widget: "focus mouseenter,blur mouseleave",
  41. tooltip: "mouseenter,mouseleave"
  42. },
  43. // 1.2
  44. layout: '<div/>',
  45. tipClass: 'tooltip'
  46. },
  47. addEffect: function(name, loadFn, hideFn) {
  48. effects[name] = [loadFn, hideFn];
  49. }
  50. };
  51. var effects = {
  52. toggle: [
  53. function(done) {
  54. var conf = this.getConf(), tip = this.getTip(), o = conf.opacity;
  55. if (o < 1) { tip.css({opacity: o}); }
  56. tip.show();
  57. done.call();
  58. },
  59. function(done) {
  60. this.getTip().hide();
  61. done.call();
  62. }
  63. ],
  64. fade: [
  65. function(done) {
  66. var conf = this.getConf();
  67. if (!$.browser.msie || conf.fadeIE) {
  68. this.getTip().fadeTo(conf.fadeInSpeed, conf.opacity, done);
  69. }
  70. else {
  71. this.getTip().show();
  72. done();
  73. }
  74. },
  75. function(done) {
  76. var conf = this.getConf();
  77. if (!$.browser.msie || conf.fadeIE) {
  78. this.getTip().fadeOut(conf.fadeOutSpeed, done);
  79. }
  80. else {
  81. this.getTip().hide();
  82. done();
  83. }
  84. }
  85. ]
  86. };
  87. /* calculate tip position relative to the trigger */
  88. function getPosition(trigger, tip, conf) {
  89. // get origin top/left position
  90. var top = conf.relative ? trigger.position().top : trigger.offset().top,
  91. left = conf.relative ? trigger.position().left : trigger.offset().left,
  92. pos = conf.position[0];
  93. top -= tip.outerHeight() - conf.offset[0];
  94. left += trigger.outerWidth() + conf.offset[1];
  95. // iPad position fix
  96. if (/iPad/i.test(navigator.userAgent)) {
  97. top -= $(window).scrollTop();
  98. }
  99. // adjust Y
  100. var height = tip.outerHeight() + trigger.outerHeight();
  101. if (pos == 'center') { top += height / 2; }
  102. if (pos == 'bottom') { top += height; }
  103. // adjust X
  104. pos = conf.position[1];
  105. var width = tip.outerWidth() + trigger.outerWidth();
  106. if (pos == 'center') { left -= width / 2; }
  107. if (pos == 'left') { left -= width; }
  108. return {top: top, left: left};
  109. }
  110. function Tooltip(trigger, conf) {
  111. var self = this,
  112. fire = trigger.add(self),
  113. tip,
  114. timer = 0,
  115. pretimer = 0,
  116. title = trigger.attr("title"),
  117. tipAttr = trigger.attr("data-tooltip"),
  118. effect = effects[conf.effect],
  119. shown,
  120. // get show/hide configuration
  121. isInput = trigger.is(":input"),
  122. isWidget = isInput && trigger.is(":checkbox, :radio, select, :button, :submit"),
  123. type = trigger.attr("type"),
  124. evt = conf.events[type] || conf.events[isInput ? (isWidget ? 'widget' : 'input') : 'def'];
  125. // check that configuration is sane
  126. if (!effect) { throw "Nonexistent effect \"" + conf.effect + "\""; }
  127. evt = evt.split(/,\s*/);
  128. if (evt.length != 2) { throw "Tooltip: bad events configuration for " + type; }
  129. // trigger --> show
  130. trigger.on(evt[0], function(e) {
  131. clearTimeout(timer);
  132. if (conf.predelay) {
  133. pretimer = setTimeout(function() { self.show(e); }, conf.predelay);
  134. } else {
  135. self.show(e);
  136. }
  137. // trigger --> hide
  138. }).on(evt[1], function(e) {
  139. clearTimeout(pretimer);
  140. if (conf.delay) {
  141. timer = setTimeout(function() { self.hide(e); }, conf.delay);
  142. } else {
  143. self.hide(e);
  144. }
  145. });
  146. // remove default title
  147. if (title && conf.cancelDefault) {
  148. trigger.removeAttr("title");
  149. trigger.data("title", title);
  150. }
  151. $.extend(self, {
  152. show: function(e) {
  153. // tip not initialized yet
  154. if (!tip) {
  155. // data-tooltip
  156. if (tipAttr) {
  157. tip = $(tipAttr);
  158. // single tip element for all
  159. } else if (conf.tip) {
  160. tip = $(conf.tip).eq(0);
  161. // autogenerated tooltip
  162. } else if (title) {
  163. tip = $(conf.layout).addClass(conf.tipClass).appendTo(document.body)
  164. .hide().append(title);
  165. // manual tooltip
  166. } else {
  167. tip = trigger.next();
  168. if (!tip.length) { tip = trigger.parent().next(); }
  169. }
  170. if (!tip.length) { throw "Cannot find tooltip for " + trigger; }
  171. }
  172. if (self.isShown()) { return self; }
  173. // stop previous animation
  174. tip.stop(true, true);
  175. // get position
  176. var pos = getPosition(trigger, tip, conf);
  177. // restore title for single tooltip element
  178. if (conf.tip) {
  179. tip.html(trigger.data("title"));
  180. }
  181. // onBeforeShow
  182. e = $.Event();
  183. e.type = "onBeforeShow";
  184. fire.trigger(e, [pos]);
  185. if (e.isDefaultPrevented()) { return self; }
  186. // onBeforeShow may have altered the configuration
  187. pos = getPosition(trigger, tip, conf);
  188. // set position
  189. tip.css({position:'absolute', top: pos.top, left: pos.left});
  190. shown = true;
  191. // invoke effect
  192. effect[0].call(self, function() {
  193. e.type = "onShow";
  194. shown = 'full';
  195. fire.trigger(e);
  196. });
  197. // tooltip events
  198. var event = conf.events.tooltip.split(/,\s*/);
  199. if (!tip.data("__set")) {
  200. tip.off(event[0]).on(event[0], function() {
  201. clearTimeout(timer);
  202. clearTimeout(pretimer);
  203. });
  204. if (event[1] && !trigger.is("input:not(:checkbox, :radio), textarea")) {
  205. tip.off(event[1]).on(event[1], function(e) {
  206. // being moved to the trigger element
  207. if (e.relatedTarget != trigger[0]) {
  208. trigger.trigger(evt[1].split(" ")[0]);
  209. }
  210. });
  211. }
  212. // bind agein for if same tip element
  213. if (!conf.tip) tip.data("__set", true);
  214. }
  215. return self;
  216. },
  217. hide: function(e) {
  218. if (!tip || !self.isShown()) { return self; }
  219. // onBeforeHide
  220. e = $.Event();
  221. e.type = "onBeforeHide";
  222. fire.trigger(e);
  223. if (e.isDefaultPrevented()) { return; }
  224. shown = false;
  225. effects[conf.effect][1].call(self, function() {
  226. e.type = "onHide";
  227. fire.trigger(e);
  228. });
  229. return self;
  230. },
  231. isShown: function(fully) {
  232. return fully ? shown == 'full' : shown;
  233. },
  234. getConf: function() {
  235. return conf;
  236. },
  237. getTip: function() {
  238. return tip;
  239. },
  240. getTrigger: function() {
  241. return trigger;
  242. }
  243. });
  244. // callbacks
  245. $.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","), function(i, name) {
  246. // configuration
  247. if ($.isFunction(conf[name])) {
  248. $(self).on(name, conf[name]);
  249. }
  250. // API
  251. self[name] = function(fn) {
  252. if (fn) { $(self).on(name, fn); }
  253. return self;
  254. };
  255. });
  256. }
  257. // jQuery plugin implementation
  258. $.fn.tooltip2 = function(conf) {
  259. // return existing instance
  260. var api = this.data("tooltip");
  261. if (api) { return api; }
  262. conf = $.extend(true, {}, $.tools.tooltip.conf, conf);
  263. // position can also be given as string
  264. if (typeof conf.position == 'string') {
  265. conf.position = conf.position.split(/,?\s/);
  266. }
  267. // install tooltip for each entry in jQuery object
  268. this.each(function() {
  269. api = new Tooltip($(this), conf);
  270. $(this).data("tooltip", api);
  271. });
  272. return conf.api ? api: this;
  273. };
  274. }) (jQuery);