Tidy up CSS styles to aid custom arrow styling

jaz303 · Apr 23, 2011 · 06fd815 · 06fd815
1 parent 8cbf19d
commit 06fd815
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/docs/src/tipsy-docs.css b/docs/src/tipsy-docs.css
@@ -3,4 +3,8 @@
   #gravity a { }
     #gravity a:hover { color: #505050; background: none; }
 
-.red .tipsy-inner { background: red; }
+.red .tipsy-inner { background: red; }
+.red .tipsy-arrow-n { border-bottom-color: red; }
+.red .tipsy-arrow-s { border-top-color: red; }
+.red .tipsy-arrow-e { border-left-color: red; }
+.red .tipsy-arrow-w { border-right-color: red; }
diff --git a/src/javascripts/jquery.tipsy.js b/src/javascripts/jquery.tipsy.js
@@ -60,6 +60,7 @@
                 }
 
                 $tip.css(tp).addClass('tipsy-' + gravity);
+                $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
                 if (this.options.className) {
                     $tip.addClass(maybeCall(this.options.className, this.$element[0]));
                 }

diff --git a/src/stylesheets/tipsy.css b/src/stylesheets/tipsy.css
@@ -7,13 +7,19 @@
   /* 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; }
+  .tipsy-arrow { position: absolute; width: 0; height: 0; border: 5px solid transparent; }
 
-  .tipsy-n .tipsy-arrow, .tipsy-nw .tipsy-arrow, .tipsy-ne .tipsy-arrow { top: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; }
-  .tipsy-s .tipsy-arrow, .tipsy-sw .tipsy-arrow, .tipsy-se .tipsy-arrow { bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; }
+  /* 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, .tipsy-nw .tipsy-arrow, .tipsy-ne .tipsy-arrow { top: 0; border-top: none; }
+  .tipsy-s .tipsy-arrow, .tipsy-sw .tipsy-arrow, .tipsy-se .tipsy-arrow { bottom: 0; border-bottom: none; }
   .tipsy-n .tipsy-arrow, .tipsy-s .tipsy-arrow { left: 50%; margin-left: -5px; }
   .tipsy-nw .tipsy-arrow, .tipsy-sw .tipsy-arrow { left: 10px; }
   .tipsy-ne .tipsy-arrow, .tipsy-se .tipsy-arrow { right: 10px; }
   .tipsy-e .tipsy-arrow, .tipsy-w .tipsy-arrow { top: 50%; margin-top: -5px; }
-  .tipsy-e .tipsy-arrow { right: 0; border-top: 5px solid transparent; border-left: 5px solid black; border-bottom: 5px solid transparent; }
-  .tipsy-w .tipsy-arrow { left: 0; border-top: 5px solid transparent; border-right: 5px solid black; border-bottom: 5px solid transparent; }
+  .tipsy-e .tipsy-arrow { right: 0; border-right: none; }
+  .tipsy-w .tipsy-arrow { left: 0; border-left: none; }