Permalink
Browse files

Initial GitHub release

  • Loading branch information...
stefangabos committed Apr 28, 2013
0 parents commit 6954c48f6432ca639731022493e3916d2ae56abd
Showing with 4,680 additions and 0 deletions.
  1. +66 −0 README.md
  2. +1 −0 changelog.txt
  3. +1 −0 documentation.txt
  4. +177 −0 examples/index.html
  5. +8 −0 examples/libraries/index.html
  6. +165 −0 examples/libraries/syntaxhighlighter/LGPL-LICENSE
  7. +20 −0 examples/libraries/syntaxhighlighter/MIT-LICENSE
  8. +8 −0 examples/libraries/syntaxhighlighter/index.html
  9. +8 −0 examples/libraries/syntaxhighlighter/public/css/index.html
  10. +324 −0 examples/libraries/syntaxhighlighter/public/css/shCoreDefault.css
  11. +8 −0 examples/libraries/syntaxhighlighter/public/index.html
  12. +654 −0 examples/libraries/syntaxhighlighter/public/javascript/XRegExp.js
  13. +8 −0 examples/libraries/syntaxhighlighter/public/javascript/index.html
  14. +91 −0 examples/libraries/syntaxhighlighter/public/javascript/shBrushCss.js
  15. +52 −0 examples/libraries/syntaxhighlighter/public/javascript/shBrushJScript.js
  16. +69 −0 examples/libraries/syntaxhighlighter/public/javascript/shBrushXml.js
  17. +1,721 −0 examples/libraries/syntaxhighlighter/public/javascript/shCore.js
  18. +8 −0 examples/public/css/index.html
  19. +94 −0 examples/public/css/reset.css
  20. +32 −0 examples/public/css/style.css
  21. +8 −0 examples/public/index.html
  22. +23 −0 examples/public/javascript/core.js
  23. +8 −0 examples/public/javascript/index.html
  24. +2 −0 examples/public/javascript/jquery-1.9.1.js
  25. BIN examples/screenshot.png
  26. +8 −0 index.html
  27. +165 −0 license.txt
  28. +8 −0 public/css/index.html
  29. +64 −0 public/css/zebra_tooltips.css
  30. +8 −0 public/index.html
  31. +8 −0 public/javascript/index.html
  32. +1 −0 public/javascript/zebra_tooltips.js
  33. +828 −0 public/javascript/zebra_tooltips.src.js
  34. +1 −0 readme.txt
  35. +33 −0 zebra-tooltips.jquery.json
@@ -0,0 +1,66 @@
+##Zebra_Tooltips
+
+####A lightweight and highly configurable jQuery plugin for creating simple but smart and attractive tooltips
+
+Zebra_Tooltips is a lightweight (around 5KB minified, 1.6KB gzipped) jQuery plugin for creating simple but smart and visually attractive tooltips, featuring nice transitions, and offering a wide range of configuration options. The plugin detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the parent element, and shifting them left or right so that the tooltips are always visible.
+
+Besides the default behavior of tooltips showing when user hovers the element, tooltips may also be shown and hidden programatically using the API. When shown programatically, the tooltips will feature a "close" button, and clicking it will be the only way of closing tooltips opened this way. This is very useful for drawing users' attention to specific areas of a website (like error messages after validating a form).
+
+By default, the plugin will use the "title" attribute of the element for the tooltip's content, but the tooltip's content can also be specified programatically. Tooltips' appearance can be easily customized both through JavaScript and/or CSS. Also, tooltips can be aligned left, center or right, relative to the parent element.
+
+Zebra_Tooltips uses NO IMAGES (everything is handled from CSS), and falls back gracefully for browsers that don't support all the fancy stuff; also, tooltips can be attached to any element not just anchor tags!
+
+Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
+
+<!-- ![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot.png) -->
+
+##Features
+
+ - lightweight (around 5KB minified, 1.6KB gzipped)
+ - features nice transitions
+ - detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the elements and shifting them left or right so that the tooltips are always visible
+ - tooltips may also be shown and hidden using the API
+ - appearance can be easily customized both through JavaScript and/or CSS
+ - tooltips can be aligned left, center or right, relative to the parent element
+ - makes use of NO IMAGES (everything is handled from CSS), and falls back gracefully for browsers that don't support all the fancy stuff
+ - can be attached to any elements not just anchors
+ - works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
+
+##Requirements
+
+Zebra_Tooltips has no dependencies other than jQuery. The recommended jQuery version is 1.7+ (due to the fact that the library makes use of something that the previous versions of jQuery have done in a way that it it now deprecated in WebKit powered browsers)
+
+##How to use
+
+First, load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
+
+```html
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="public/javascript/jquery-1.9.1.js"><\/script>')</script>
+```
+
+Load the Zebra_Tooltips plugin
+
+```html
+<script type="text/javascript" src="path/to/zebra_tooltips.js"></script>
+```
+
+Load the plugin’s stylesheet file
+
+```html
+<link rel="stylesheet" href="path/to/zebra_tooltip.css" type="text/css">
+```
+
+Now, within the DOM-ready event do
+
+```javascript
+$(document).ready(function() {
+
+ // show tooltips for any element that has a class named "tooltips"
+ // the content of the tooltip will be taken from the element's "title" attribute
+ new $.Zebra_Tooltips($('.tooltips'));
+
+});
+```
+
+Configuration options and demos on the **[project's homepage](http://stefangabos.ro/jquery/zebra_tooltips/)**
@@ -0,0 +1 @@
+See http://stefangabos.ro/jquery/zebra-tooltips/#changelog
@@ -0,0 +1 @@
+See http://stefangabos.ro/jquery/zebra-tooltips/#how-to-use
@@ -0,0 +1,177 @@
+<!doctype html>
+
+<html>
+
+ <head>
+
+ <meta charset="utf-8">
+
+ <title>Zebra_Tooltips examples</title>
+
+ <link rel="stylesheet" href="public/css/reset.css" type="text/css">
+ <link rel="stylesheet" href="../public/css/zebra_tooltips.css" type="text/css">
+ <link rel="stylesheet" href="public/css/style.css" type="text/css">
+ <link type="text/css" rel="stylesheet" href="libraries/syntaxhighlighter/public/css/shCoreDefault.css">
+
+ <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/XRegExp.js"></script>
+ <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shCore.js"></script>
+ <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushJScript.js"></script>
+ <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushXml.js"></script>
+ <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushCSS.js"></script>
+
+ <script type="text/javascript">
+ SyntaxHighlighter.defaults['toolbar'] = false;
+ SyntaxHighlighter.all();
+ </script>
+
+ </head>
+
+ <body>
+
+ <div class="main-wrapper">
+
+ <h3>Zebra_Tooltips Demos</h3>
+
+ <p><strong></strong> Installation</p>
+
+ <pre class="brush:xml">
+ <!-- load the CSS file -->
+ &lt;link rel="stylesheet" href="path/to/zebra_tooltips.css" type="text/css">
+ <!-- load jQuery -->
+ &lt;script type="text/javascript" src="path/to/jquery.js">&lt;/script>
+ <!-- load the Zebra_Tooltips plugin -->
+ &lt;script type="text/javascript" src="path/to/zebra_tooltips.js">&lt;/script>
+ </pre>
+
+ <h5><strong>1.</strong> Basic usage</h5>
+
+ <p><em>The HTML:</em></p>
+
+ <pre class="brush:xml">
+ &lt;p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
+ hendrerit neque congue pretium iaculis justo laoreet orci elit
+ &lt;a href="#" class="zebra_tips1" title="Zebra_Tooltips - Simple but smart tooltips!">
+ condimentum&lt;/a>. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum
+ amet sed.&lt;/p>
+ </pre>
+
+ <p><em>The JavaScript:</em></p>
+
+ <pre class="brush:js">
+ $(document).ready(function() {
+ new $.Zebra_Tooltips($('.zebra_tips1'));
+ });
+ </pre>
+
+ <p><em>The result:</em></p>
+
+ <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
+ pretium iaculis justo laoreet orci elit <a href="#" class="zebra_tips1" title="Zebra_Tooltips is a lightweight (around 5KB minified, 1.6KB gzipped) tooltip jQuery plugin for creating simple, but smart and visually attractive tooltips, featuring nice transitions and offering a wide range of configuration options.">condimentum</a>.
+ Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.</p>
+
+ <h5><strong>2.</strong> Custom colors</h5>
+
+ <p><em>The HTML:</em></p>
+
+ <pre class="brush:xml">
+ &lt;p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
+ hendrerit neque congue pretium iaculis justo laoreet orci elit
+ &lt;a href="#" class="zebra_tips2" title="Zebra_Tooltips - Simple but smart tooltips!">
+ condimentum&lt;/a>. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum
+ amet sed.&lt;/p>
+ </pre>
+
+ <p><em>The JavaScript:</em></p>
+
+ <pre class="brush:js">
+ $(document).ready(function() {
+ new $.Zebra_Tooltips($('.zebra_tips2'), {
+ 'background_color': '#C40000',
+ 'color': '#FFF'
+ });
+ });
+ </pre>
+
+ <p><em>The result:</em></p>
+
+ <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
+ pretium iaculis justo laoreet orci elit <a href="#" class="zebra_tips2" title="Appearance can be easily customized both through JavaScript and/or CSS. Also, tooltips can be aligned left, center or right relative to the parent element.">condimentum</a>.
+ Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.</p>
+
+ <h5><strong>3.</strong> Align tooltips relative to the parent element</h5>
+
+ <p><em>The HTML:</em></p>
+
+ <pre class="brush:xml">
+ &lt;p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
+ hendrerit neque congue pretium iaculis justo laoreet orci elit
+ &lt;a href="#" class="zebra_tips4" title="Zebra_Tooltips - Simple but smart tooltips!">
+ left&lt;/a>. Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
+ Quis hendrerit neque congue pretium iaculis justo laoreet orci elit
+ &lt;a href="#" class="zebra_tips5" title="Zebra_Tooltips - Simple but smart tooltips!">
+ right&lt;/a>. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet
+ sed.&lt;/p>
+ </pre>
+
+ <p><em>The JavaScript:</em></p>
+
+ <pre class="brush:js">
+ $(document).ready(function() {
+ new $.Zebra_Tooltips($('.zebra_tips4'), {
+ 'position': 'left',
+ 'max_width': 300
+ });
+ new $.Zebra_Tooltips($('.zebra_tips5'), {
+ 'position': 'right',
+ 'max_width': 300
+ });
+ });
+ </pre>
+
+ <p><em>The result:</em></p>
+
+ <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
+ pretium iaculis justo laoreet orci elit <a href="#" class="zebra_tips4" title="Hello! I am aligned to the left of the element. Also, my width is different.">left</a>.
+ Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
+ pretium iaculis justo laoreet orci elit <a href="#" class="zebra_tips5" title="Hello! I am aligned to the right of the element. Also, my width is different.">right</a>.
+ Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.</p>
+
+ <h5><strong>4.</strong> Show tooltips programatically</h5>
+
+ <p><em>The HTML:</em></p>
+
+ <pre class="brush:xml">
+ &lt;p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis
+ hendrerit neque congue pretium iaculis justo laoreet orci elit
+ &lt;a href="#" class="zebra_tips3" title="Zebra_Tooltips - Simple but smart tooltips!">
+ condimentum&lt;/a>. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum
+ amet sed.&lt;/p>
+ </pre>
+
+ <p><em>The JavaScript:</em></p>
+
+ <pre class="brush:js">
+ $(document).ready(function() {
+ var zt = new $.Zebra_Tooltips($('.zebra_tips3'));
+ zt.show($('.zebra_tips3'), true); // destroy on close
+ });
+ </pre>
+
+ <p><em>The result:</em></p>
+
+ <p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
+ pretium iaculis justo laoreet orci elit <a href="#" class="zebra_tips3" title="Zebra_Tooltips uses NO IMAGES (uses CSS for the arrow, rounded corners and drop shadow, and falls back gracefully for browsers that don’t support all the features), and the tooltips can be attached to any element not just anchor tags!<br><br>Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)">condimentum</a>.
+ Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.</p>
+
+ <p>&nbsp;</p>
+ <p>&nbsp;</p>
+
+ </div>
+
+ <script type="text/javascript" src="public/javascript/jquery-1.9.1.js"></script>
+ <script type="text/javascript" src="../public/javascript/zebra_tooltips.js"></script>
+ <script type="text/javascript" src="public/javascript/core.js"></script>
+
+ </body>
+
+</html>
@@ -0,0 +1,8 @@
+<html>
+<head>
+ <title>403 Forbidden</title>
+</head>
+<body>
+ <p>Directory access is forbidden.</p>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 6954c48

Please sign in to comment.