Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Tidy up CSS styles to aid custom arrow styling

  • Loading branch information...
commit 06fd81585c9e766639ebba43b14df319dbbb00dc 1 parent 8cbf19d
@jaz303 authored
View
6 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; }
View
1  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]));
}
View
16 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; }
Please sign in to comment.
Something went wrong with that request. Please try again.