From 06fd81585c9e766639ebba43b14df319dbbb00dc Mon Sep 17 00:00:00 2001
From: Jason Frame <jason@onehackoranother.com>
Date: Sat, 23 Apr 2011 22:17:47 +0100
Subject: [PATCH] Tidy up CSS styles to aid custom arrow styling

---
 docs/src/tipsy-docs.css         |  6 +++++-
 src/javascripts/jquery.tipsy.js |  1 +
 src/stylesheets/tipsy.css       | 16 +++++++++++-----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/docs/src/tipsy-docs.css b/docs/src/tipsy-docs.css
index aa9c680..fba70a8 100644
--- 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; }
\ No newline at end of file
+.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
index e9f8233..580581f 100644
--- 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
index 9a80c3f..d91eae7 100644
--- 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; }