javascript 实现的ToolTip
浏览数：30 /
时间：2015年06月08日
1 纯javascript实现的toolTip
2 实现当鼠标在要展示的Dom上移动时，显示的toolTip可以在不同位置显示
3 可以控制toolTip的显示样式
4 可以控制toolTip关闭方式
5 可以控制是否定时关闭
源代码：
1 /* ToolTip */ 2 GLOBAL.namespace("Component"); 3 GLOBAL.Component.EnumType ={ 4 StyleHeadDefault:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘}, 5 StyleBodyDefault:{‘backgroundColor‘:‘#ffffff‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px 2px‘}, 6 StyleBoxDefault:{‘border‘ :‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘}, 7 StyleHeadDark:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘}, 8 StyleBodyDark:{‘backgroundColor‘:‘#8a8a8a‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘}, 9 StyleBoxDark:{‘border‘ :‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘}, 10 StyleHeadYellow:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘}, 11 StyleBodyYellow:{‘backgroundColor‘:‘#ffffa9‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘}, 12 StyleBoxYellow:{‘border‘:‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘}, 13 StyleHeadGreen:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘ : ‘150px‘,‘padding‘:‘1px‘}, 14 StyleBodyGreen:{‘backgroundColor‘:‘#4db135‘,‘color‘:‘#ffffff‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘}, 15 StyleBoxGreen:{‘border‘:‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘}, 16 StyleHeadBlue:{‘backgroundColor‘:‘#f7f7f7‘,‘color‘:‘#000000‘,‘width‘:‘150px‘,‘padding‘:‘1px‘}, 17 StyleBodyBlue:{‘backgroundColor‘:‘#4182c2‘,‘color‘:‘#ffffff‘,‘width‘:‘150px‘,‘padding‘ :‘1px 2px‘}, 18 StyleBoxBlue:{‘border‘:‘1px #e0e0e0 solid‘,‘width‘:‘150px‘,‘height‘:‘200px‘}, 19 StyleRadius:{‘borderRadius‘: ‘4px‘}, 20 StyleShadow:{‘box_shadow‘:‘gray 0.33em 0.25em 0.25em‘}, 21 PlaceWTop:‘top‘, 22 PlaceWRight:‘right‘, 23 PlaceWLeft:‘left‘, 24 PlaceWButton:‘button‘, 25 PlaceBT:‘T‘, 26 PlaceBC:‘C‘, 27 PlaceBB:‘B‘ 28 }; 29 30 GLOBAL.Component.ToolTip = function(nodeID) { 31 this._tipNode = GLOBAL.Dom.get(nodeID); 32 if(this._tipNode == null) 33 return; 34 /*toolTip基础结构*/ 35 this._tipBox = null; 36 this._tipBoxID = nodeID+"tipBox"; 37 this._tipHead=null; 38 this._tipHeadID = nodeID+"tipHead"; 39 this._tipBody = null; 40 this._tipBodyID = nodeID+"tipBody"; 41 this._tipBodyContent = null; 42 this._tipBodyContentID = nodeID +"tipBodyContent"; 43 this._tipScroll = null; 44 this._tipClose = null; 45 this._tipCloseID = nodeID+"tipClose"; 46 /*操作特性*/ 47 this._isClear = 0; 48 this._isEventClear = 0; 49 this._isHide = 1; 50 this._isTimer = 0; 51 this._timerID = null; 52 this._EventMap = {}; 53 this._timerMilliseconds = 2000; 54 this._isShowClose = 1; 55 this._isAuto = 1; 56 /*显示特性*/ 57 this._tipBoxStyle = GLOBAL.Component.EnumType.StyleBoxDefault; 58 this._tipHeadStyle = GLOBAL.Component.EnumType.StyleHeadDefault; 59 this._tipBodyStyle = GLOBAL.Component.EnumType.StyleBodyDefault; 60 /*位置特性*/ 61 this._placeW = GLOBAL.Component.EnumType.PlaceWButton; 62 this._placeB = GLOBAL.Component.EnumType.PlaceBC; 63 /*创建Div*/ 64 this._createContainer(); 65 /*设置内容，*/ 66 this.setTip(); 67 /*设置样式*/ 68 this.setStyle(); 69 /*并设置高度，添加滚动条*/ 70 this.scaleHeight(); 71 /*设置显示方式*/ 72 this.setShowType(); 73 /*绑定事件*/ 74 this.bindEvent(); 75 }; 76 /*外部调用显示paramters{ 77 isEventClear,isTimer,timerMilliseconds,placeW,placeB,isShowClose,isAuto}*/ 78 GLOBAL.Component.ToolTip.prototype.showToolTip = function(headHtml,bodyHtml,parameters) { 79 this.setTip(headHtml,bodyHtml); 80 this.scaleHeight(); 81 this.setShowType(parameters); 82 this.bindEvent(); 83 }; 84 /*创建Div*/ 85 GLOBAL.Component.ToolTip.prototype._createContainer = function() { 86 this._tipBox = document.createElement("div"); 87 this._tipBox.id = this._tipBoxID; 88 GLOBAL.Dom.setStyle(this._tipBox,{‘position‘:‘absolute‘,‘visibility‘:‘hidden‘,‘overflow‘:‘hidden‘}); 89 this._tipHead = document.createElement("div"); 90 this._tipHead.id = this._tipHeadID; 91 GLOBAL.Dom.setStyle(this._tipHead,{‘position‘:‘absolute‘,‘top‘:‘0px‘,‘left‘:‘0px‘,‘width‘:‘100%‘}); 92 this._tipBox.appendChild(this._tipHead); 93 this._tipBody = document.createElement("div"); 94 this._tipBody.id = this._tipBodyID; 95 GLOBAL.Dom.setStyle(this._tipBody,{‘position‘:‘absolute‘,‘left‘:‘0px‘,‘width‘:‘100%‘}); 96 this._tipBox.appendChild(this._tipBody); 97 this._tipBodyContent = document.createElement("div"); 98 this._tipBodyContent.id = this._tipBodyContentID; 99 this._tipBody.appendChild(this._tipBodyContent); 100 this._tipClose = document.createElement("button"); 101 this._tipClose.id = this._tipCloseID; 102 this._tipClose.innerHTML = "×"; 103 GLOBAL.Dom.setStyle(this._tipClose,{‘position‘:‘absolute‘,‘top‘:‘0px‘,‘right‘:‘0px‘,‘color‘:‘#FF0000‘,‘backgroundColor‘:‘transparent‘,‘border‘:‘1px solid transparent‘,‘padding‘: ‘0px‘}); 104 this._tipBox.appendChild(this._tipClose); 105 document.body.appendChild(this._tipBox); 106 }; 107 108 GLOBAL.Component.ToolTip.prototype.setStyle = function(tipBoxStyle,tipHeadStyle,tipBodyStyle) { 109 this._tipBoxStyle = tipBoxStyle || this._tipBoxStyle; 110 this._tipHeadStyle = tipHeadStyle || this._tipHeadStyle; 111 this._tipBodyStyle = tipBodyStyle || this._tipBodyStyle; 112 GLOBAL.Dom.setStyle(this._tipBox,this._tipBoxStyle); 113 GLOBAL.Dom.setStyle(this._tipHead,this._tipHeadStyle); 114 GLOBAL.Dom.setStyle(this._tipBody,this._tipBodyStyle); 115 }; 116 117 GLOBAL.Component.ToolTip.prototype.setTip = function(headHtml,bodyHtml) { 118 var v_headHtml = headHtml || ""; 119 var v_bodyHtml = bodyHtml || "Default body"; 120 this._tipHead.innerHTML = v_headHtml; 121 this._tipBodyContent.innerHTML = v_bodyHtml; 122 /*清除滚动条*/ 123 if(this._tipScroll) 124 { 125 this._tipScroll.clearAll(); 126 } 127 /*设置高度*/ 128 if(GLOBAL.TOOL.isEmpty(v_headHtml)) 129 { 130 this._tipHead.style.height = "0px"; 131 } else 132 { 133 this._tipHead.style.height = "20px"; 134 } 135 }; 136 137 GLOBAL.Component.ToolTip.prototype.scaleHeight = function() 138 { 139 var headHeight = this._tipHead.clientHeight; 140 var boxHeight =this._tipBox.clientHeight; 141 if(boxHeight === 0) 142 { 143 boxHeight = 100; 144 this._tipBox.style.height = boxHeight+"px"; 145 } 146 if(headHeight === 0) 147 { 148 //不显示_tipHead 149 this._tipBody.style.height = boxHeight+"px"; 150 this._tipBody.style.top = "0px"; 151 }else{ 152 this._tipBody.style.height = (boxHeight - headHeight)+"px"; 153 this._tipBody.style.top = headHeight+"px"; 154 } 155 /*添加滚动条*/ 156 this._tipScroll = new GLOBAL.Component.TinyVScrollBar(this._tipBodyContentID); 157 }; 158 159 /*清理事件*/ 160 GLOBAL.Component.ToolTip.prototype._clearEvent = function () { 161 if (this._EventMap != null) { 162 var key, comArray, tmp; 163 for (key in this._EventMap) { 164 comArray = key.split(‘$‘); 165 if (this._EventMap[key] == null) 166 continue; 167 if (comArray.length >= 2) { 168 tmp = comArray[0]; 169 if (tmp.indexOf(‘_‘) >= 0) { 170 eval(‘GLOBAL.Event.remove(this.‘ + GLOBAL.TOOL.trim(comArray[0]) + ‘,"‘ + GLOBAL.TOOL.trim(comArray[1]) + ‘",this._EventMap["‘ + key + ‘"]);‘); 171 } else { 172 eval(‘GLOBAL.Event.remove(‘ + GLOBAL.TOOL.trim(comArray[0]) + ‘,"‘ + GLOBAL.TOOL.trim(comArray[1]) + ‘",this._EventMap["‘ + key + ‘"]);‘); 173 } 174 } 175 } 176 } 177 }; 178 179 /* 设置显示方式 paramters{ 180 isEventClear,isTimer,timerMilliseconds,placeW,placeB,isShowClose,isAuto} 181 */ 182 GLOBAL.Component.ToolTip.prototype.setShowType=function(paramters) { 183 if(typeof(paramters) =="undefined"||paramters == null) 184 { 185 return ; 186 } 187 if(typeof(paramters.isAuto)!="undefined") 188 { 189 this._isAuto = paramters.isAuto ||this._isAuto; 190 } 191 if(typeof(paramters.isEventClear)!="undefined") 192 { 193 this._isEventClear = paramters.isEventClear ||this._isEventClear; 194 } 195 if(typeof(paramters.isTimer)!="undefined") 196 { 197 this._isTimer = paramters.isTimer ||this._isTimer; 198 } 199 if(typeof(paramters.timerMilliseconds)!="undefined") 200 { 201 this._timerMilliseconds = paramters.timerMilliseconds || this._timerMilliseconds; 202 } 203 if(typeof(paramters.placeW)!="undefined") 204 { 205 this._placeW = paramters.placeW ||this._placeW; 206 } 207 if(typeof(paramters.placeB)!="undefined") 208 { 209 this._placeB = paramters.placeB ||this._placeB; 210 } 211 if(typeof(paramters.isShowClose)!="undefined") 212 { 213 this._isShowClose = paramters.isShowClose ||this._isShowClose; 214 if(this._isShowClose ===1) 215 { 216 GLOBAL.Dom.setStyle(this._tipClose,{‘display‘:‘block‘}); 217 }else 218 { 219 GLOBAL.Dom.setStyle(this._tipClose,{‘display‘:‘none‘}); 220 } 221 } 222 }; 223 224 /*显示窗口*/ 225 GLOBAL.Component.ToolTip.prototype._showWindow = function () { 226 if (this._isClear === 0) { 227 /*未被移除*/ 228 if(this._isHide === 1) 229 { 230 GLOBAL.Dom.setStyle(this._tipBox,{‘visibility‘:‘visible‘}); 231 this._isHide = 0; 232 } 233 } 234 }; 235 /*隐藏窗口*/ 236 GLOBAL.Component.ToolTip.prototype._hideWindow = function () { 237 if (this._isClear === 0) { 238 /*未被移除*/ 239 if(this._isHide === 0) 240 { 241 GLOBAL.Dom.setStyle(this._tipBox,{‘visibility‘:‘hidden‘}); 242 this._isHide = 1; 243 } 244 } 245 }; 246 /*显示窗口*/ 247 GLOBAL.Component.ToolTip.prototype.show = function () { 248 if(this._isHide === 0) 249 { 250 this._hideWindow(); 251 }else 252 { 253 this._showWindow(); 254 } 255 }; 256 257 /*清理所有资源 调用后控件则作废*/ 258 GLOBAL.Component.ToolTip.prototype.clearAll = function () { 259 if(this._isClear === 1) 260 return ; 261 if(this._timerID) 262 { 263 GLOBAL.Timer.clearTimeout(this._timerID); 264 } 265 this._clearEvent(); 266 if(this._tipBox) 267 { 268 this._tipBox.parentNode.removeChild(this._tipBox); 269 } 270 this._isClear = 1; 271 }; 272 273 /*绑定事件*/ 274 GLOBAL.Component.ToolTip.prototype.bindEvent=function() { 275 this._clearEvent(); 276 if(this._isEventClear === 1) 277 { 278 /*关闭按钮事件*/ 279 this._EventMap._tipClose$click = GLOBAL.Event.on(this._tipClose,"click",this.clearAll,this); 280 }else 281 { 282 /*关闭按钮事件*/ 283 this._EventMap._tipClose$click = GLOBAL.Event.on(this._tipClose,"click",this._hideWindow,this); 284 } 285 /*主体事件*/ 286 this._EventMap._tipNode$mouseover = GLOBAL.Event.on(this._tipNode, ‘mouseover‘, this.mouseoverEventHandler, this); 287 }; 288 289 /*主体事件*/ 290 GLOBAL.Component.ToolTip.prototype.mouseoverEventHandler=function(e) { 291 /*如果isAuto==1 则使用鼠标移动事件*/ 292 var mousePosition = GLOBAL.Event.getMouseEventDocumentPostion(e); 293 var nodePosition = GLOBAL.TOOL.getPosition(this._tipNode); 294 var nodeSize = GLOBAL.TOOL.getNodeClientSize(this._tipNode); 295 var tipSize = GLOBAL.TOOL.getNodeClientSize(this._tipBox); 296 if(this._isAuto == 1) 297 { 298 /*计算显示位置*/ 299 /*上边比右边*/ 300 var scaleMax = 0; 301 scaleMax = (mousePosition.x-nodePosition.x); 302 if(scaleMax<=(mousePosition.y-nodePosition.y)) 303 { 304 this._placeW = GLOBAL.Component.EnumType.PlaceWLeft; 305 }else 306 { 307 scaleMax = (mousePosition.y-nodePosition.y); 308 this._placeW = GLOBAL.Component.EnumType.PlaceWTop; 309 } 310 if(scaleMax >=(nodePosition.x+nodeSize.x-mousePosition.x)) 311 { 312 scaleMax = (nodePosition.x+nodeSize.x-mousePosition.x); 313 this._placeW = GLOBAL.Component.EnumType.PlaceWRight; 314 } 315 if(scaleMax >=(nodePosition.y+nodeSize.h-mousePosition.y)) 316 { 317 scaleMax = (nodePosition.y+nodeSize.h-mousePosition.y); 318 this._placeW = GLOBAL.Component.EnumType.PlaceWButton; 319 } 320 /*计算显示的中间位置*/ 321 if(this._placeW == GLOBAL.Component.EnumType.PlaceWTop ||this._placeW == GLOBAL.Component.EnumType.PlaceWButton ) 322 { 323 /*以x轴做计算*/ 324 scaleMax = nodeSize.w/4; 325 if(mousePosition.x<=(nodePosition.x+scaleMax)) 326 { 327 this._placeB = GLOBAL.Component.EnumType.PlaceBT; 328 }else if(mousePosition.x>=(nodePosition.x+scaleMax*3)) 329 { 330 this._placeB = GLOBAL.Component.EnumType.PlaceBB; 331 }else 332 { 333 this._placeB = GLOBAL.Component.EnumType.PlaceBC; 334 } 335 }else 336 { 337 scaleMax = nodeSize.h/4; 338 if(mousePosition.y<=(nodePosition.y+scaleMax)) 339 { 340 this._placeB = GLOBAL.Component.EnumType.PlaceBT; 341 }else if(mousePosition.y>=(nodePosition.y+scaleMax*3)) 342 { 343 this._placeB = GLOBAL.Component.EnumType.PlaceBB; 344 }else 345 { 346 this._placeB = GLOBAL.Component.EnumType.PlaceBC; 347 } 348 } 349 } 350 /*计算x和y*/ 351 var topX,topY; 352 var offset = 10; 353 if(this._placeW === GLOBAL.Component.EnumType.PlaceWTop) 354 { 355 /*位于顶边 只需设置一次topY*/ 356 topY = nodePosition.y-tipSize.h -offset; 357 if(this._placeB === GLOBAL.Component.EnumType.PlaceBT) 358 { 359 /*位于头*/ 360 topX = nodePosition.x-tipSize.w/2; 361 }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){ 362 /*位于中*/ 363 topX = nodePosition.x+nodeSize.w/2-tipSize.w/2; 364 }else{ 365 /*位于尾*/ 366 topX = nodePosition.x+nodeSize.w-tipSize.w/2; 367 } 368 }else if(this._placeW === GLOBAL.Component.EnumType.PlaceWLeft) 369 { 370 /*位于左边 只需设置一次topX*/ 371 topX = nodePosition.x - tipSize.w -offset; 372 if(this._placeB === GLOBAL.Component.EnumType.PlaceBT) 373 { 374 /*位于头*/ 375 topY = nodePosition.y - tipSize.h/2; 376 }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){ 377 /*位于中*/ 378 topY = nodePosition.y +nodeSize.h/2- tipSize.h/2; 379 }else{ 380 /*位于尾*/ 381 topY = nodePosition.y +nodeSize.h- tipSize.h/2; 382 } 383 }else if(this._placeW === GLOBAL.Component.EnumType.PlaceWRight) 384 { 385 /*位于右边 只需设置一次topX*/ 386 topX = nodePosition.x + nodeSize.w +offset; 387 if(this._placeB === GLOBAL.Component.EnumType.PlaceBT) 388 { 389 /*位于头*/ 390 topY = nodePosition.y - tipSize.h/2; 391 }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){ 392 /*位于中*/ 393 topY = nodePosition.y +nodeSize.h/2- tipSize.h/2; 394 }else{ 395 /*位于尾*/ 396 topY = nodePosition.y +nodeSize.h- tipSize.h/2; 397 } 398 } 399 else 400 { 401 /*位于底边 只需设置一次topY*/ 402 topY = nodePosition.y +nodeSize.h+offset; 403 if(this._placeB === GLOBAL.Component.EnumType.PlaceBT) 404 { 405 /*位于头*/ 406 topX = nodePosition.x-tipSize.w/2; 407 }else if(this._placeB === GLOBAL.Component.EnumType.PlaceBC){ 408 /*位于中*/ 409 topX = nodePosition.x+nodeSize.w/2-tipSize.w/2; 410 }else{ 411 /*位于尾*/ 412 topX = nodePosition.x+nodeSize.w-tipSize.w/2; 413 } 414 } 415 this._tipBox.style.left = topX+"px"; 416 this._tipBox.style.top = topY+"px"; 417 /*显示窗口*/ 418 this._showWindow(); 419 if(this._isEventClear === 1) 420 { 421 /*定时器事件*/ 422 if(this._isTimer ==1) 423 { 424 this._timerID = GLOBAL.Timer.setTimeout(this.clearAll,null,this._timerMilliseconds,this); 425 } 426 }else 427 { 428 /*定时器事件*/ 429 if(this._isTimer==1) 430 { 431 this._timerID = GLOBAL.Timer.setTimeout(this._hideWindow,null,this._timerMilliseconds,this); 432 } 433 } 434 GLOBAL.Event.stopPropagation(e); 435 };
使用：
var toolTip = new GLOBAL.Component.ToolTip("node#ID");
toolTip.showToolTip("测试函数","测试内容为：显示位置追随鼠标！",{isTimer:1});
测试结果：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
