Changeset 7786

Timestamp:

03/25/07 17:51:55 (22 months ago)

Author:

bill

Message:

make tooltip a bubble, and trigger it from position of node rather than position of mouse, for accessibility reasons.
refs #2639

Location:

dijit/trunk

Files:

• templates/Tooltip.html (added)
• tests/test_Tooltip.html (modified) (1 diff)
• themes/tundra/tundra.css (modified) (1 diff)
• Tooltip.js (modified) (5 diffs)

dijit/trunk/tests/test_Tooltip.html

@@ -20 +20 @@
                 
                 /* override tooltip style for this page */
-                body .dojoTooltip { color: blue; border: solid 2px blue; padding: 4px; }
-                
+
+                body .dojoTooltipContainer { color: blue; border: solid 2px blue; padding: 4px; }
+                body .dojoTooltip .dojoTooltipConnector { border-bottom-color: blue; }
+
                 /* and then have some tooltips that look different than the others (just for testing) */
                 body .waves { color: red; font-style: italic; background: url(images/2.jpg) top right; border: red 3px dotted;}

dijit/trunk/themes/tundra/tundra.css

@@ -399 +399 @@
 
 .dojoTooltip {
-        border: solid black 1px;
-        background: beige;
+        position: absolute;
+        z-index: 10;
+        display: block;
+        margin-top: 10px;
+        border: red;
+        /* todo: make visible but off screen */
+}
+
+.dojoTooltipContainer {
+        border: solid black 2px;
+        background: #b8b5b5;
         color: black;
-        position: absolute;
         font-size: small;
         padding: 2px 2px 2px 2px;
-        z-index: 10;
-        display: block;
+}
+
+.dojoTooltipConnector {
+        /* the border on the triangle */
+        font-size: 0px; line-height: 0%; width: 0px;
+        position: absolute;
+        border-top: none;
+        border-bottom: 14px solid black;
+        border-left: 7px solid transparent;
+        border-right: 7px solid transparent;
+        top: -14px;
+        left: 3px;
+        z-index: 2;
+}
+
+.dojoTooltipConnector div {
+        /* the background of the triangle */
+        font-size: 0px; line-height: 0%; width: 0px;
+        position: absolute;
+        border-bottom: 10px solid #b8b5b5;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        top: 6px;
+        left: -5px;
+        z-index: 3;
 }
 

dijit/trunk/Tooltip.js

@@ -8 +8 @@
 
 dojo.require("dijit.base.Widget");
+dojo.require("dijit.base.TemplatedWidget");
 dojo.require("dijit.util.PopupManager");
 
 dojo.declare(
         "dijit.Tooltip",
-        [dijit.base.Widget],
+        [dijit.base.Widget, dijit.base.TemplatedWidget],
         {
                 // summary
@@ -37 +38 @@
                 connectId: "",
 
+                templatePath: dojo.uri.moduleUri("dijit", "templates/Tooltip.html"),
+        
                 postCreate: function(){
                         this._connectNode = dojo.byId(this.connectId);
@@ -42 +45 @@
 
                         if(this.caption != ""){
-                                this.domNode.appendChild(document.createTextNode(this.caption));
+                                this.containerNode.appendChild(document.createTextNode(this.caption));
                         }
-                        dojo.html.addClass(this.domNode, "dojoTooltip");
                 },
 
                 _onMouseOver: function(/*Event*/ e){
-                        this._mouse = {pageX: e.pageX, pageY: e.pageY, target: e.target};
-
                         // Start tracking mouse movements, so we know when to cancel timers or erase the tooltip
                         if(!this._tracking){
@@ -60 +60 @@
 
                 _onMouseMove: function(/*Event*/ e) {
-                        this._mouse = {pageX: e.pageX, pageY: e.pageY, target: e.target};
-
                         if(dojo.html.overElement(this._connectNode, e) || dojo.html.overElement(this.domNode, e)){
                                 this._onHover(e);
@@ -113 +111 @@
 
                         if (this.isShowingNow) { return; }
-                        dijit.util.PopupManager.open(this._mouse, this, [10,15]);
+                        dijit.util.PopupManager.openAround(this._connectNode, this, {'BL': 'TL', 'TL': 'BL'}, [0, 0] );
                         this.isShowingNow = true;
                 },