Permalink
Browse files

Added arrow above the tooltip

  • Loading branch information...
1 parent 4455677 commit c32282aa4e5cc87b4fdd8450a42ce6116ef7d91e @okonet committed Jul 17, 2008
Showing with 36 additions and 3 deletions.
  1. +21 −0 tooltips.css
  2. +15 −3 tooltips.js
View
@@ -15,6 +15,27 @@
.tooltip .xb2 { margin: 0 3px; border-width: 0 2px; }
.tooltip .xb3 { margin: 0 2px; }
.tooltip .xb4 { height: 2px; margin: 0 1px; }
+
+ .tooltip .xarrow {
+ position: relative;
+ top: 2px; left: 12px;
+ width: 11px;
+ height: 7px;
+ }
+ .tooltip .xarrow b {
+ display: block;
+ background:#666;
+ border-left:1px solid #333;
+ border-right:1px solid #333;
+ font-size:1px;
+ height: 1px;
+ }
+ .tooltip .xarrow .a1 { margin: 0 5px; background-color: #333; border: 0 solid; width: 1px; }
+ .tooltip .xarrow .a2 { width: 1px; margin: 0 4px;}
+ .tooltip .xarrow .a3 { width: 3px; margin: 0 3px;}
+ .tooltip .xarrow .a4 { width: 5px; margin: 0 2px;}
+ .tooltip .xarrow .a5 { width: 7px; margin: 0 1px;}
+ .tooltip .xarrow .a6 { width: 9px; margin: 0 0px;}
.tooltip .xboxcontent {
padding: 0 .5em;
View
@@ -65,6 +65,8 @@ Tooltip.prototype = {
// Building tooltip container
this.tooltip = new Element("div", { className: "tooltip", style: "display: none" });
+ var arrow = new Element("div", { className: "xarrow" }).insert('<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b><b class="a5"></b><b class="a6"></b>');
+
var top = new Element("div", { className: "xtop" }).insert(
new Element("div", { className: "xb1", style: "background-color:" + this.options.borderColor + ";" })
).insert(
@@ -90,11 +92,17 @@ Tooltip.prototype = {
((this.options.textShadowColor != '') ? "; text-shadow:2px 2px 0" + this.options.textShadowColor + ";" : "") }).update(this.content);
// Building and injecting tooltip into DOM
- this.tooltip.insert({'bottom':top});
- this.tooltip.insert({'bottom':content});
- this.tooltip.insert({'bottom':bottom});
+ this.tooltip.insert(arrow).insert(top).insert(content).insert(bottom);
$(document.body).insert({'top':this.tooltip});
+ // Coloring arrow element
+ this.tooltip.select('.xarrow b').each(function(el){
+ if(!el.hasClassName('a1'))
+ el.setStyle({backgroundColor: this.options.backgroundColor, borderColor: this.options.borderColor });
+ else
+ el.setStyle({backgroundColor: this.options.borderColor });
+ }.bind(this));
+
Element.extend(this.tooltip); // IE needs element to be manually extended
this.options.width = this.tooltip.getWidth();
this.tooltip.style.width = this.options.width + 'px'; // IE7 needs width to be defined
@@ -118,6 +126,10 @@ Tooltip.prototype = {
if(this.xCord + this.options.width >= Element.getWidth(document.body)) {
this.options.align = "right";
this.xCord = this.xCord - this.options.width + 20;
+ this.tooltip.down('.xarrow').setStyle({left: this.options.width - 24 + 'px'});
+ } else {
+ this.options.align = "left";
+ this.tooltip.down('.xarrow').setStyle({left: 12 + 'px'});
}
this.tooltip.style.left = this.xCord - 7 + "px";

0 comments on commit c32282a

Please sign in to comment.