Commits

Seb Ruiz committed 7af2f44

AUI-1173: Wrap tipsy with $.tooltip

* Override tipsy defaults with opacity: 1 and hoverable: true
* Update styles as provided by vfatia and mbond to be PDL compliant
* Move overrides into atlassian package
* Rename atlassian files as tooltip.{css,js}

  • Participants
  • Parent commits 59ddb4d

Comments (0)

Files changed (8)

File auiplugin/src/demo/aui.js

         "atlassian/jquery/jquery.hotkeys.js",
         "atlassian/jquery/jquery.getdocheight.js",
         "atlassian/jquery/jquery.stalker.js",
-        "atlassian/jquery/jquery.throbber.js",
-
-        "experimental/external/jquery/jquery.tipsy.js"
+        "atlassian/jquery/jquery.throbber.js"
     ];
 
     var experimentalIncludes = [
+        "atlassian/tooltip.js",
         "external/jquery/jquery.tipsy.js"
     ];
 

File auiplugin/src/demo/common.css

 @import url("../../../auiplugin/src/main/resources/css/atlassian/dropdown2.css");
 @import url("../../../auiplugin/src/main/resources/experimental/css/atlassian/aui-buttons.css");
 @import url("../../../auiplugin/src/main/resources/experimental/css/external/jquery/jquery.tipsy.css");
-@import url("../../../auiplugin/src/main/resources/experimental/css/atlassian/jquery/jquery.tipsy.overrides.css");
+@import url("../../../auiplugin/src/main/resources/experimental/css/atlassian/tooltip.css");
 /* demo page stuff */
 @import url("../../../auiplugin-tests/src/main/resources/css/test-and-demo-pages.css");

File auiplugin/src/demo/tooltips/tooltips-demo.html

     <h3>Simple Tooltip</h3>
 
     <div class="html-code">
-        <p class="description"> Show a <a id="simple-tooltip" href="#" title="This is a simple tooltip">rich tooltip</a> for any links or elements. Just add a 'title' attribute to your link and call .tipsy() </p>
+        <p class="description"> Show a <a id="simple-tooltip" href="#" title="This is a simple tooltip">rich tooltip</a> for any links or elements. Just add a 'title' attribute to your link and call .tooltip() </p>
     </div>
     <script type="text/javascript">
         addSample(function () {
-            AJS.$("#simple-tooltip").tipsy();
+            AJS.$("#simple-tooltip").tooltip();
         });
     </script>
 
     </div>
     <script type="text/javascript">
         addSample(function () {
-            AJS.$('#north').tipsy({gravity: 'n'});
-            AJS.$('#south').tipsy({gravity: 's'});
-            AJS.$('#east').tipsy({gravity: 'e'});
-            AJS.$('#west').tipsy({gravity: 'w'});
-            AJS.$('#north-west').tipsy({gravity: 'nw'});
-            AJS.$('#north-east').tipsy({gravity: 'ne'});
-            AJS.$('#south-west').tipsy({gravity: 'sw'});
-            AJS.$('#south-east').tipsy({gravity: 'se'});
+            AJS.$('#north').tooltip({gravity: 'n'});
+            AJS.$('#south').tooltip({gravity: 's'});
+            AJS.$('#east').tooltip({gravity: 'e'});
+            AJS.$('#west').tooltip({gravity: 'w'});
+            AJS.$('#north-west').tooltip({gravity: 'nw'});
+            AJS.$('#north-east').tooltip({gravity: 'ne'});
+            AJS.$('#south-west').tooltip({gravity: 'sw'});
+            AJS.$('#south-east').tooltip({gravity: 'se'});
         });
     </script>
 
     </div>
     <script type="text/javascript">
         addSample(function () {
-            AJS.$('#custom-tooltip').tipsy({
+            AJS.$('#custom-tooltip').tooltip({
                 title: function () {
                     var index = AJS.$("a").index(this);
                     return "This is link number " + index + " in all of the page";
     </div>
     <script type="text/javascript">
         addSample(function () {
-            AJS.$('#full-docs').tipsy({
+            AJS.$('#full-docs').tooltip({
                 fade: true,
                 html: true,
                 delayIn: 50,
-                opacity: 0.9,
                 hoverable: true,
                 title: function () {
                     return "The docs are <i>pretty good</i>. <a href='http://onehackoranother.com/projects/jquery/tipsy/'>Read them</a>, ok?";

File auiplugin/src/main/resources/atlassian-plugin.xml

         <resource type="download" name="dropdown2.js" location="${pdl.dir}js/atlassian/dropdown2.js"/>
     </web-resource>
 
-    <web-resource key="aui-experimental-tooltips" name="AUI Experimental Tooltips">
+    <web-resource key="aui-experimental-tooltip" name="AUI Experimental Tooltips">
         <dependency>com.atlassian.auiplugin:ajs</dependency>
-        <resource type="download" name="jquery.tipsy.js" location="experimental/js/external/jquery/jquery.tipsy.js"/>
+
         <resource type="download" name="jquery.tipsy.css" location="experimental/css/external/jquery/jquery.tipsy.css"/>
-        <resource type="download" name="jquery.tipsy.overrides.css" location="experimental/css/atlassian/jquery/jquery.tipsy.overrides.css"/>
+        <resource type="download" name="tooltip.css" location="experimental/css/atlassian/tooltip.css"/>
+
+        <resource type="download" name="jquery.tipsy.js" location="experimental/js/external/jquery/jquery.tipsy.js"/>
+        <resource type="download" name="tooltip.js" location="experimental/js/atlassian/tooltip.js"/>
     </web-resource>
 
     <!-- legacy resources -->

File auiplugin/src/main/resources/experimental/css/atlassian/jquery/jquery.tipsy.overrides.css

-.tipsy {
-    font-size: 12px;
-    font-family: sans-serif;
-}
-
-.tipsy-inner {
-    background: rgb(51, 51, 51);
-    padding: 5px 8px;
-}
-
-.tipsy-arrow-n { border-bottom-color: rgb(51, 51, 51); }
-.tipsy-arrow-s { border-top-color: rgb(51, 51, 51); }
-.tipsy-arrow-e { border-left-color: rgb(51, 51, 51); }
-.tipsy-arrow-w { border-right-color: rgb(51, 51, 51); }
-
-.tipsy a,
-.tipsy a:visited {
-    color: white;
-    text-decoration: underline;
-}

File auiplugin/src/main/resources/experimental/css/atlassian/tooltip.css

+.tipsy {
+    font-size: 12px;
+    line-height: 20px;
+    font-family: sans-serif;
+}
+
+.tipsy-inner {
+    background: rgba(51, 51, 51, 0.9);
+    padding: 5px 10px;
+}
+
+.tipsy-arrow {
+    border-color: rgba(51, 51, 51, 0.9);
+}
+
+.tipsy-arrow-n {
+    border-bottom-color: #333;
+    border-bottom-color: rgba(51, 51, 51, 0.9);
+}
+
+.tipsy-arrow-s {
+    border-top-color: #333;
+    border-top-color: rgba(51, 51, 51, 0.9);
+}
+
+.tipsy-arrow-e {
+    border-left-color: #333;
+    border-left-color: rgba(51, 51, 51, 0.9);
+}
+
+.tipsy-arrow-w {
+    border-right-color: #333;
+    border-right-color: rgba(51, 51, 51, 0.9);
+}
+
+.tipsy a,
+.tipsy a:visited {
+    color: white;
+    text-decoration: underline;
+}

File auiplugin/src/main/resources/experimental/css/external/jquery/jquery.tipsy.css

 
   /* Rounded corners */
   .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
-  
+
   /* Uncomment for shadow */
   /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
-  
+
   .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
-  
+
   /* Rules to colour arrows */
   .tipsy-arrow-n { border-bottom-color: #000; }
   .tipsy-arrow-s { border-top-color: #000; }
   .tipsy-arrow-e { border-left-color: #000; }
   .tipsy-arrow-w { border-right-color: #000; }
-  
+
 	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
     .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
     .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}

File auiplugin/src/main/resources/experimental/js/atlassian/tooltip.js

+(function ($) {
+    'use strict';
+
+    $.fn.tooltip = function (options) {
+        return this.tipsy($.extend({}, $.fn.tooltip.defaults, options))
+    };
+
+    $.fn.tooltip.defaults = {
+        opacity: 1.0,
+        hoverable: true
+    };
+}(jQuery));