Changeset 9126

Timestamp:

06/14/07 05:34:45 (19 months ago)

Author:

bill

Message:

Make tooltip appear on right, or on left for browsers with text-direction set to
right-to-left (middle eastern languages).

Add images/CSS rules for all orientations of tooltip.

Mostly working although have to fix handling when tooltip doesn't fit on right.

Fixes #3267, #3236

Location:

dijit/trunk

Files:

• themes/dijit.css (modified) (2 diffs)
• themes/tundra/images/tooltipConnectorDown.gif (added)
• themes/tundra/images/tooltipConnectorDown.png (added)
• themes/tundra/images/tooltipConnectorLeft.gif (added)
• themes/tundra/images/tooltipConnectorLeft.png (added)
• themes/tundra/images/tooltipConnectorRight.gif (added)
• themes/tundra/images/tooltipConnectorRight.png (added)
• themes/tundra/images/tooltipConnectorUp.gif (moved) (moved from dijit/trunk/themes/tundra/tooltipConnector.gif)
• themes/tundra/images/tooltipConnectorUp.png (moved) (moved from dijit/trunk/themes/tundra/tooltipConnector.png)
• themes/tundra/tundra.css (modified) (5 diffs)
• Tooltip.js (modified) (2 diffs)

dijit/trunk/themes/dijit.css

@@ -598 +598 @@
 
 
-
-
-
 /****
                 dijit.Tooltip
@@ -609 +606 @@
         z-index: 10;
         display: block;
-        margin-top: 10px;
         /* make visible but off screen */
         left: -10000px;

dijit/trunk/themes/tundra/tundra.css

@@ -16 +16 @@
         /* TODO: won't work; path is wrong; use gif instead? */
         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="dijitTundraGradientBg.png", sizingMethod="scale");
-}
-
-.dj_ie6 .tundra .dijitTooltipConnector {
-        background-image: url(tooltipConnector.gif);
 }
 
@@ -496 +492 @@
 
 .tundra .dijitTooltip {
+        /* the outermost dom node, holding the connector and container */
         opacity: 0.9;
 }
@@ -501 +498 @@
 .tundra .dijitTooltipContainer {
         /*
+                The part with the text.
+
                 NOTE: 
                         FF doesn't clip images used as CSS bgs if you specify a border
@@ -507 +506 @@
                 background: #ffffff url("popupMenuBg.gif") repeat-x bottom left;
         */
-        background-color: white;
+        background-color: #fafafa;
         border:1px solid #9b9b9b;
         padding:0.45em;
@@ -515 +514 @@
 }
 
-.tundra .dijitTooltipConnector {
+.tundra .dijitTooltipConnect {
+        /* the arrow piece */
         border:0px;
+        z-index: 2;
+}
+
+.tundra .dijitTooltipBelow {
+        margin-top: 13px;
+}
+.tundra .dijitTooltipBelow .dijitTooltipConnector {
+        /* the arrow piece for tooltips below an element */
         top: -13px;
         left: 3px;
-        z-index: 2;
-        background:url("tooltipConnector.png") no-repeat top left;
+        background:url("images/tooltipConnectorUp.png") no-repeat top left;
         width:16px;
         height:14px;
+}
+.dj_ie6 .tundra .dijitTooltipBelow .dijitTooltipConnector {
+        background-image: url("images/tooltipConnectorUp.gif");
+}
+
+.tundra .dijitTooltipAbove {
+        margin-bottom: 13px;
+}
+.tundra .dijitTooltipAbove .dijitTooltipConnector {
+        /* the arrow piece for tooltips above an element */
+        bottom: -13px;
+        left: 3px;
+        background:url("images/tooltipConnectorDown.png") no-repeat top left;
+        width:16px;
+        height:14px;
+}
+.dj_ie6 .tundra .dijitTooltipAbove .dijitTooltipConnector {
+        background-image: url("images/tooltipConnectorDown.gif");
+}
+
+.tundra .dijitTooltipLeft {
+        margin-right: 13px;
+}
+.tundra .dijitTooltipLeft .dijitTooltipConnector {
+        /* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+        right: -12px;
+        bottom: 7px;
+        background:url("images/tooltipConnectorRight.png") no-repeat top left;
+        width:16px;
+        height:14px;
+}
+.dj_ie6 .tundra .dijitTooltipLeft .dijitTooltipConnector {
+        background-image: url("images/tooltipConnectorRight.gif");
+}
+
+.tundra .dijitTooltipRight {
+        margin-left: 13px;
+}
+.tundra .dijitTooltipRight .dijitTooltipConnector {
+        /* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+        left: -13px;
+        bottom: 7px;
+        background:url("images/tooltipConnectorLeft.png") no-repeat top left;
+        width:16px;
+        height:14px;
+}
+.dj_ie6 .tundra .dijitTooltipRight .dijitTooltipConnector {
+        background-image: url("images/tooltipConnectorLeft.gif");
 }
 

dijit/trunk/Tooltip.js

@@ -39 +39 @@
 
                 show: function(/*String*/ innerHTML, /*DomNode*/ aroundNode){
-                        // summary: display tooltip w/specified contents underneath specified node
+                        // summary:
+                        //      Display tooltip w/specified contents to right specified node
+                        //      (To left if there's no space on the right, or if LTR==right
 
                         if(this.fadeOut.status() == "playing"){
@@ -47 +49 @@
                         }
                         this.containerNode.innerHTML=innerHTML;
-                        dijit.util.placeOnScreenAroundElement(this.domNode, aroundNode, [0,0],
-                                {'BL': 'TL', 'TL': 'BL'});
+
+                        // position the element and change CSS according to position    
+                        var align = this.isLeftToRight() ? {'BR': 'BL', 'BL': 'BR'} : {'BL': 'BR', 'BR': 'BL'};
+                        dijit.util.placeOnScreenAroundElement(this.domNode, aroundNode, [0,0], align);
+                        // TODO: need to know which position placeOnScreenAroundElement picked
+                        this.domNode.className="dijitTooltip dijitTooltip" + (this.isLeftToRight() ? "Right" : "Left");
+                        
+                        // show it
                         dojo.style(this.domNode, "opacity", 0);
                         this.fadeIn.play();