| 1 | <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> |
|---|
| 2 | <head> |
|---|
| 3 | <title>A Sample ToolTip using dijit and dojox.gfx</title> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 7 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 8 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 9 | .tooltipBody { |
|---|
| 10 | color:#fff; |
|---|
| 11 | } |
|---|
| 12 | </style> |
|---|
| 13 | <script type="text/javascript" data-dojo-config="parseOnLoad:true, isDebug:true" src="../../../dojo/dojo.js"></script> |
|---|
| 14 | <script type="text/javascript"> |
|---|
| 15 | dojo.require("dijit.form.Button"); |
|---|
| 16 | |
|---|
| 17 | dojo.require("dojox.gfx"); |
|---|
| 18 | dojo.require("dojox.gfx.move"); |
|---|
| 19 | dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); |
|---|
| 20 | |
|---|
| 21 | dojo.declare("demo.Tooltip",[dijit._Widget,dijit._Templated],{ |
|---|
| 22 | |
|---|
| 23 | // attachId: String|DomNode? |
|---|
| 24 | // the Id or domNode to attach this tooltip to |
|---|
| 25 | attachId:"", |
|---|
| 26 | |
|---|
| 27 | // attachHover: Boolean |
|---|
| 28 | // disable hover behavior for the target |
|---|
| 29 | attachHover:true, |
|---|
| 30 | |
|---|
| 31 | // attachParent: Boolean |
|---|
| 32 | // automatically attach to our parentnode rather than byId or query |
|---|
| 33 | attachParent:false, |
|---|
| 34 | |
|---|
| 35 | // attachQuery: String? |
|---|
| 36 | // an optional selector query to attach this tooltip to |
|---|
| 37 | attachQuery:"", |
|---|
| 38 | |
|---|
| 39 | // attachScope: String|DomNode? |
|---|
| 40 | // and optional scope to run the query against, passed as the |
|---|
| 41 | // second arg to dojo.query() |
|---|
| 42 | queryScope:"", |
|---|
| 43 | |
|---|
| 44 | // hideDelay: Int |
|---|
| 45 | // time in my to delay automatically closing the node |
|---|
| 46 | hideDelay: 123, // ms |
|---|
| 47 | |
|---|
| 48 | // persists: Boolean |
|---|
| 49 | // if true, the node will stay visible until explicitly closed |
|---|
| 50 | // via _hide() or click on closeIcon |
|---|
| 51 | persists:false, |
|---|
| 52 | |
|---|
| 53 | templateString: |
|---|
| 54 | '<div class="foo">' |
|---|
| 55 | +'<div style="position:relative;">' |
|---|
| 56 | +'<div dojoAttachPoint="surfaceNode"></div>' |
|---|
| 57 | +'<div class="tooltipBody" dojoAttachPoint="containerNode"></div>' |
|---|
| 58 | +'</div>' |
|---|
| 59 | +'</div>', |
|---|
| 60 | |
|---|
| 61 | postCreate:function(){ |
|---|
| 62 | // call _Widget postCreate first |
|---|
| 63 | this.inherited(arguments); |
|---|
| 64 | // gfx version of "_Templated" idea: |
|---|
| 65 | this._initSurface(); |
|---|
| 66 | |
|---|
| 67 | if(this.attachParent){ |
|---|
| 68 | // over-ride and reuse attachId as domNode from now on |
|---|
| 69 | this.attachId = this.domNode.parentNode; |
|---|
| 70 | } |
|---|
| 71 | if(this.attachId){ |
|---|
| 72 | // domNode again. setup connections |
|---|
| 73 | this.attachId = dojo.byId(this.attachId); |
|---|
| 74 | if(this.attachHover){ |
|---|
| 75 | this.connect(this.attachId,"onmouseenter","_show"); |
|---|
| 76 | } |
|---|
| 77 | if(!this.persists){ |
|---|
| 78 | this.connect(this.attachId,"onmouseleave","_initHide"); |
|---|
| 79 | } |
|---|
| 80 | }else if(this.attachQuery){ |
|---|
| 81 | // setup connections via dojo.query for multi-tooltips |
|---|
| 82 | var nl = dojo.query(this.attachQuery,this.queryScope); |
|---|
| 83 | if(this.attachHover){ nl.connect("onmouseenter",this,"_show") } |
|---|
| 84 | if(!this.persists){ nl.connect("onmouseleave",this,"_initHide") } |
|---|
| 85 | } |
|---|
| 86 | // place the tooltip |
|---|
| 87 | dojo.body().appendChild(this.domNode); |
|---|
| 88 | dojo.style(this.domNode,{ |
|---|
| 89 | position:"absolute" |
|---|
| 90 | }); |
|---|
| 91 | // could do this in css: |
|---|
| 92 | dojo.style(this.containerNode,{ |
|---|
| 93 | position:"absolute", |
|---|
| 94 | top:"15px", |
|---|
| 95 | left:"12px", |
|---|
| 96 | height:"83px", |
|---|
| 97 | width:"190px" |
|---|
| 98 | }); |
|---|
| 99 | // setup our animations |
|---|
| 100 | this._hideAnim = dojo.fadeOut({ node:this.domNode, duration:150 }); |
|---|
| 101 | this._showAnim = dojo.fadeIn({ node:this.domNode, duration:75 }); |
|---|
| 102 | this.connect(this._hideAnim,"onEnd","_postHide"); |
|---|
| 103 | if(!this.persists){ |
|---|
| 104 | this.connect(this.domNode,"onmouseleave","_initHide"); |
|---|
| 105 | } |
|---|
| 106 | // hide quickly |
|---|
| 107 | this._postHide(); |
|---|
| 108 | }, |
|---|
| 109 | |
|---|
| 110 | _initHide: function(e){ |
|---|
| 111 | // summary: start the timer for the hideDelay |
|---|
| 112 | if(!this.persists && this.hideDelay){ |
|---|
| 113 | this._delay = setTimeout(dojo.hitch(this,"_hide",e||null),this.hideDelay); |
|---|
| 114 | } |
|---|
| 115 | }, |
|---|
| 116 | |
|---|
| 117 | _clearDelay: function(){ |
|---|
| 118 | // summary: clear our hide delay timeout |
|---|
| 119 | if(this._delay){ clearTimeout(this._delay); } |
|---|
| 120 | }, |
|---|
| 121 | |
|---|
| 122 | _show: function(e){ |
|---|
| 123 | // summary: show the widget |
|---|
| 124 | this._clearDelay(); |
|---|
| 125 | var pos = dojo.coords(e.target || this.attachId,true) |
|---|
| 126 | // we need to more accurately position the domNode: |
|---|
| 127 | dojo.style(this.domNode,{ |
|---|
| 128 | top: pos.y - (pos.h / 2) - 50, |
|---|
| 129 | left: pos.x + pos.w - 25, |
|---|
| 130 | display:"block" |
|---|
| 131 | }); |
|---|
| 132 | dojo.fadeIn({ node: this.domNode, duration:75 }).play(); |
|---|
| 133 | }, |
|---|
| 134 | |
|---|
| 135 | _hide: function(e){ |
|---|
| 136 | // summary: hide the tooltip |
|---|
| 137 | this._hideAnim.play(); |
|---|
| 138 | }, |
|---|
| 139 | |
|---|
| 140 | _postHide: function(){ |
|---|
| 141 | // summary: after hide animation cleanup |
|---|
| 142 | dojo.style(this.domNode,"display","none"); |
|---|
| 143 | }, |
|---|
| 144 | |
|---|
| 145 | _initSurface:function(){ |
|---|
| 146 | // made generally from an SVG file: |
|---|
| 147 | this.surface = dojox.gfx.createSurface(this.surfaceNode,220,120); |
|---|
| 148 | this.tooltip = this.surface.createGroup(); |
|---|
| 149 | this.tooltip.createPath("M213,101.072c0,6.675-5.411,12.086-12.086,12.086H13.586 c-6.675,0-12.086-5.411-12.086-12.086V21.004c0-6.675,5.411-12.086,12.086-12.086h187.328c6.675,0,12.086,5.411,12.086,12.086 V101.072z") |
|---|
| 150 | .setFill("rgba(0,0,0,0.25)"); |
|---|
| 151 | |
|---|
| 152 | this.tooltip.createPath("M211.5,97.418c0,6.627-5.373,12-12,12 h-186c-6.627,0-12-5.373-12-12v-79.5c0-6.627,5.373-12,12-12h186c6.627,0,12,5.373,12,12V97.418z") |
|---|
| 153 | .setStroke({ width:2, color:"#FFF" }) |
|---|
| 154 | .setFill("rgba(0,0,0,0.5)") |
|---|
| 155 | .connect("onmouseover",dojo.hitch(this,"_clearDelay")); |
|---|
| 156 | |
|---|
| 157 | if(this.persists){ |
|---|
| 158 | // make the close icon |
|---|
| 159 | this._toolButton = this.surface.createGroup(); |
|---|
| 160 | this._toolButton.createEllipse({ cx:207.25, cy:12.32, rx: 7.866, ry: 7.099 }) |
|---|
| 161 | .setFill("#ededed"); |
|---|
| 162 | this._toolButton.createCircle({ cx:207.25, cy: 9.25, r:8.25 }) |
|---|
| 163 | .setStroke({ width:2, color:"#FFF" }) |
|---|
| 164 | .setFill("#000") |
|---|
| 165 | ; |
|---|
| 166 | this._toolButton.connect("onclick",dojo.hitch(this,"_hide")); |
|---|
| 167 | // the X |
|---|
| 168 | this._toolButton.createLine({ x1:203.618, y1:5.04, x2: 210.89, y2:12.979 }) |
|---|
| 169 | .setStroke({ width:2, color:"#d6d6d6" }); |
|---|
| 170 | this._toolButton.createLine({ x1:203.539, y1:12.979, x2: 210.89, y2:5.04 }) |
|---|
| 171 | .setStroke({ width:2, color:"#d6d6d6" }); |
|---|
| 172 | } |
|---|
| 173 | } |
|---|
| 174 | }); |
|---|
| 175 | </script> |
|---|
| 176 | |
|---|
| 177 | </head> |
|---|
| 178 | <body class="tundra"> |
|---|
| 179 | |
|---|
| 180 | <h1>dojox.gfx: A Sample tooltip</h1> |
|---|
| 181 | |
|---|
| 182 | <ul style="width:150px; border:2px solid #ededed; cursor:pointer"> |
|---|
| 183 | |
|---|
| 184 | |
|---|
| 185 | <!-- you can put any content you want in there --> |
|---|
| 186 | <li id="warn2"> |
|---|
| 187 | Tooltip + Button |
|---|
| 188 | <div attachId="warn2" id="warn2tt" dojoType="demo.Tooltip"><p style="margin-top:0">Canvas renderer doesn't implement event handling. |
|---|
| 189 | <button dojoType="dijit.form.Button"> |
|---|
| 190 | Button |
|---|
| 191 | <script type="dojo/method" data-dojo-event="onClick"> |
|---|
| 192 | alert(" woo hoo! "); |
|---|
| 193 | dijit.byId("warn2tt")._hide(); |
|---|
| 194 | </script> |
|---|
| 195 | </button> |
|---|
| 196 | </p></div> |
|---|
| 197 | </li> |
|---|
| 198 | |
|---|
| 199 | <!-- a simple tooltip --> |
|---|
| 200 | <li id="warn1"> |
|---|
| 201 | Hover trigger / persists |
|---|
| 202 | <div persists="true" attachId="warn1" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling.</div> |
|---|
| 203 | </li> |
|---|
| 204 | |
|---|
| 205 | <!-- these get the same tooltip from the attachQuery=".multitip" below --> |
|---|
| 206 | <li class="multitip">MultiTip trigger 1</li> |
|---|
| 207 | <li>I do nothing</li> |
|---|
| 208 | <li class="multitip">Trigger two</li> |
|---|
| 209 | |
|---|
| 210 | <li><a href="#" onclick="dijit.byId('nohover')._show(arguments[0])">show this way |
|---|
| 211 | <label dojoType="demo.Tooltip" attachParent="true" attachHover="false" id="nohover">some text</label> |
|---|
| 212 | </a> |
|---|
| 213 | </li> |
|---|
| 214 | |
|---|
| 215 | <!-- attachParent makes the tooltip look for domNode.parentNode before moving to body() --> |
|---|
| 216 | <li> |
|---|
| 217 | Parent Attached Tooltip |
|---|
| 218 | <div attachParent="true" persists="true" dojoType="demo.Tooltip"> |
|---|
| 219 | <form id="fooForm"> |
|---|
| 220 | <p style="margin-top:0;"> |
|---|
| 221 | Name:<br> <input type="text" name="username" style="border:1px solid #ededed" /><br> |
|---|
| 222 | Pass:<br> <input type="password" name="password" style="border:1px solid #ededed" /> |
|---|
| 223 | </p> |
|---|
| 224 | </form> |
|---|
| 225 | </div> |
|---|
| 226 | </li> |
|---|
| 227 | |
|---|
| 228 | </ul> |
|---|
| 229 | |
|---|
| 230 | <!-- attach a single tooltip message to a number of nodes at once --> |
|---|
| 231 | <div attachQuery=".multitip" dojoType="demo.Tooltip">Canvas renderer doesn't implement event handling. (shared tooltip)</div> |
|---|
| 232 | |
|---|
| 233 | </body> |
|---|
| 234 | </html> |
|---|
