Permalink
Browse files

Original project files

  • Loading branch information...
0 parents commit 0691f08933c4e8f7580c3523c0543ee3eaa9797b Brian Cray committed Nov 29, 2010
Showing with 316 additions and 0 deletions.
  1. +12 −0 LICENSE
  2. +13 −0 README
  3. +101 −0 sample/index.html
  4. BIN sample/tooltipsy.png
  5. +101 −0 samples/index.html
  6. BIN samples/tooltipsy.png
  7. +16 −0 tooltipsy.min.js
  8. +73 −0 tooltipsy.source.js
12 LICENSE
@@ -0,0 +1,12 @@
+Powerful but awesomely simple tooltip plugin for jQuery
+Copyright (C) 2010 Brian Cray
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
13 README
@@ -0,0 +1,13 @@
+tooltipsy by Brian Cray
+
+Lincensed under GPL2 - http://www.gnu.org/licenses/gpl-2.0.html
+
+Option quick reference:
+ - offset: Tooltipsy distance from mouse cursor as array [x, y]. Defaults to [10, 10]
+ - id: DOM ID attached to tooltipsy instance. Defaults to "tooltipsy"
+ - content: HTML or text content of tooltipsy. Defaults to "" (empty string), which pulls content from target element's title attribute
+ - position: Position of tooltipsy relative to cursor - "Left", "right", or "auto". Defaults to "auto"
+ - show: Function(event, element) to show the tooltip. Defaults to jQuery's show(100) effect
+ - hide: Function(event, element) to hide the tooltip. Defaults to jQuery's fadeOut(100) effect
+
+More information visit http://tooltipsy.com/
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>tooltipsy sample</title>
+ <meta name="robots" content="none">
+ <style type="text/css">
+ #tooltipsy {
+ padding: 10px;
+ max-width: 200px;
+ color: #303030;
+ background-color: #f5f5b5;
+ border: 1px solid #DECA7E;
+ }
+ </style>
+</head>
+<body>
+<p>For the first 3 samples this page uses the following CSS:</p>
+<pre>
+#tooltipsy {
+ padding: 10px;
+ max-width: 200px;
+ color: #303030;
+ background-color: #f5f5b5;
+ border: 1px solid #DECA7E;
+}</pre>
+
+<h4>Easiest use</h4>
+<p><a id="usetitle" href="http://tooltipsy.com/" title="Hi, I was discovered in the title attribute">tooltipsy uses my title attribute</a></p>
+<pre>
+$('#usetitle').tooltipsy();
+</pre>
+
+<h4>Custom content</h4>
+<p><a id="usecontent" href="http://tooltipsy.com/" title="I have a title attribute, but tooltipsy is using custom content">tooltipsy is providing custom content</a></p>
+<pre>
+$('#usecontent').tooltipsy({content: '&lt;em&gt;Look ma&lt;/em&gt;, I\'m custom content with &lt;strong&gt;HTML&lt;/strong&gt;'});
+</pre>
+
+<h4>Custom animation</h4>
+<p><a id="useanimation" href="http://tooltipsy.com/" title="Like my custom effects?">tooltipsy using custom effects</a></p>
+<pre>
+$('#useanimation').tooltipsy({
+ show: function (e, $el) {
+ $el.slideDown(100);
+ },
+ hide: function (e, $el) {
+ $el.slideUp(100);
+ }
+});
+</pre>
+
+<h4>All settings</h4>
+<p><a id="useall" href="http://tooltipsy.com/" title="I have a title attribute, but tooltipsy is using custom content">tooltipsy using all settings</a></p>
+<pre>
+$('#useall').tooltipsy({
+ offset: [0, -90], // tooltipsy directly above cursor
+ id: 'mytip', // use #mytip instead of #tooltipsy
+ content: '&lt;img src="tooltipsy.png"&gt;', // even use images
+ position: 'left', // force tooltipsy to the left of cursor
+ show: function (e, $el) { // custom show function
+ $el.show();
+ },
+ hide: function (e, $el) { // custom hide function
+ $el.hide();
+ }
+});
+</pre>
+
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+<script type="text/javascript" src="../tooltipsy.source.js"></script>
+<script type="text/javascript">
+$(document).ready(function () {
+ $('#usetitle').tooltipsy();
+
+ $('#usecontent').tooltipsy({content: '<em>Look ma</em>, I\'m custom content with <strong>HTML</strong>'});
+
+ $('#useanimation').tooltipsy({
+ show: function (e, $el) {
+ $el.slideDown(100);
+ },
+ hide: function (e, $el) {
+ $el.slideUp(100);
+ }
+ });
+
+ $('#useall').tooltipsy({
+ offset: [0, -90],
+ id: 'mytip',
+ content: '<img src="tooltipsy.png">',
+ position: 'left',
+ show: function (e, $el) {
+ $el.fadeIn(1000);
+ },
+ hide: function (e, $el) {
+ $el.fadeOut(1000);
+ }
+ });
+});
+</script>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>tooltipsy sample</title>
+ <meta name="robots" content="none">
+ <style type="text/css">
+ #tooltipsy {
+ padding: 10px;
+ max-width: 200px;
+ color: #303030;
+ background-color: #f5f5b5;
+ border: 1px solid #DECA7E;
+ }
+ </style>
+</head>
+<body>
+<p>For the first 3 samples this page uses the following CSS:</p>
+<pre>
+#tooltipsy {
+ padding: 10px;
+ max-width: 200px;
+ color: #303030;
+ background-color: #f5f5b5;
+ border: 1px solid #DECA7E;
+}</pre>
+
+<h4>Easiest use</h4>
+<p><a id="usetitle" href="http://tooltipsy.com/" title="Hi, I was discovered in the title attribute">tooltipsy uses my title attribute</a></p>
+<pre>
+$('#usetitle').tooltipsy();
+</pre>
+
+<h4>Custom content</h4>
+<p><a id="usecontent" href="http://tooltipsy.com/" title="I have a title attribute, but tooltipsy is using custom content">tooltipsy is providing custom content</a></p>
+<pre>
+$('#usecontent').tooltipsy({content: '&lt;em&gt;Look ma&lt;/em&gt;, I\'m custom content with &lt;strong&gt;HTML&lt;/strong&gt;'});
+</pre>
+
+<h4>Custom animation</h4>
+<p><a id="useanimation" href="http://tooltipsy.com/" title="Like my custom effects?">tooltipsy using custom effects</a></p>
+<pre>
+$('#useanimation').tooltipsy({
+ show: function (e, $el) {
+ $el.slideDown(100);
+ },
+ hide: function (e, $el) {
+ $el.slideUp(100);
+ }
+});
+</pre>
+
+<h4>All settings</h4>
+<p><a id="useall" href="http://tooltipsy.com/" title="I have a title attribute, but tooltipsy is using custom content">tooltipsy using all settings</a></p>
+<pre>
+$('#useall').tooltipsy({
+ offset: [0, -90], // tooltipsy directly above cursor
+ id: 'mytip', // use #mytip instead of #tooltipsy
+ content: '&lt;img src="tooltipsy.png"&gt;', // even use images
+ position: 'left', // force tooltipsy to the left of cursor
+ show: function (e, $el) { // custom show function
+ $el.show();
+ },
+ hide: function (e, $el) { // custom hide function
+ $el.hide();
+ }
+});
+</pre>
+
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+<script type="text/javascript" src="../tooltipsy.source.js"></script>
+<script type="text/javascript">
+$(document).ready(function () {
+ $('#usetitle').tooltipsy();
+
+ $('#usecontent').tooltipsy({content: '<em>Look ma</em>, I\'m custom content with <strong>HTML</strong>'});
+
+ $('#useanimation').tooltipsy({
+ show: function (e, $el) {
+ $el.slideDown(100);
+ },
+ hide: function (e, $el) {
+ $el.slideUp(100);
+ }
+ });
+
+ $('#useall').tooltipsy({
+ offset: [0, -90],
+ id: 'mytip',
+ content: '<img src="tooltipsy.png">',
+ position: 'left',
+ show: function (e, $el) {
+ $el.fadeIn(1000);
+ },
+ hide: function (e, $el) {
+ $el.fadeOut(1000);
+ }
+ });
+});
+</script>
+</body>
+</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -0,0 +1,73 @@
+/* tooltipsy by Brian Cray
+ * Lincensed under GPL2 - http://www.gnu.org/licenses/gpl-2.0.html
+ * Option quick reference:
+ * - offset: Tooltipsy distance from mouse cursor as array [x, y]. Defaults to [10, 10]
+ * - id: DOM ID attached to tooltipsy instance. Defaults to "tooltipsy"
+ * - content: HTML or text content of tooltipsy. Defaults to "" (empty string), which pulls content from target element's title attribute
+ * - position: Position of tooltipsy relative to cursor - "Left", "right", or "auto". Defaults to "auto"
+ * - show: Function(event, element) to show the tooltip. Defaults to a show(100) effect
+ * - hide: Function(event, element) to hide the tooltip. Defaults to a fadeOut(100) effect
+ * More information visit http://tooltipsy.com/
+ */
+
+(function($){
+ $.tooltipsy = function(el, options){
+ var base = this;
+
+ base.$el = $(el);
+ base.el = el;
+
+ base.$el.data("tooltipsy", base);
+
+ base.init = function() {
+ base.settings = $.extend({},$.tooltipsy.defaults, options);
+ if($('#' + base.settings.id).length) {
+ base.$tip = $('#' + base.settings.id);
+ }
+ else {
+ base.$tip = $('<div id="' + base.settings.id + '">').appendTo('body').css({position: 'fixed', zIndex: '999'}).hide();
+ }
+ };
+
+ base.init();
+ };
+
+ $.tooltipsy.defaults = {
+ offset: [10, 10],
+ id: 'tooltipsy',
+ content: '',
+ position: 'auto',
+ show: function (e, $el) {
+ $el.css('opacity', '1').show(100);
+ },
+ hide: function (e, $el) {
+ $el.fadeOut(100);
+ }
+ };
+
+ $.fn.tooltipsy = function(options) {
+ return this.each(function() {
+ new $.tooltipsy(this, options);
+ var $thisel = $(this);
+ var tooltipsy = $thisel.data('tooltipsy');
+ $thisel.data('title', $thisel.attr('title')).attr('title', '');
+ $thisel.bind('mouseenter', function (e) {
+ var tip_position = [e.pageX + tooltipsy.settings.offset[0], e.pageY + tooltipsy.settings.offset[1]];
+ var tip_width = tooltipsy.$tip.stop().html(tooltipsy.settings.content != '' ? tooltipsy.settings.content : $thisel.data('title')).outerWidth();
+ if(tooltipsy.settings.position == 'left' || (tooltipsy.settings.position == 'auto' && tip_position[0] + tip_width > $(window).width())) {
+ var tip_css = {top: tip_position[1] + 'px', right: $(window).width() - tip_position[0] + 'px', left: 'auto'};
+ }
+ else {
+ var tip_css = {top: tip_position[1] + 'px', left: tip_position[0] + 'px', right: 'auto'};
+ }
+
+ tooltipsy.$tip.css(tip_css);
+ tooltipsy.settings.show(e, tooltipsy.$tip);
+ }).bind('mouseleave', function (e) {
+ tooltipsy.$tip.stop(true, true);
+ tooltipsy.settings.hide(e, tooltipsy.$tip);
+ });
+ });
+ };
+
+})(jQuery);

0 comments on commit 0691f08

Please sign in to comment.