Tootip小程序,整理一下自己用
需求:给表单每个信息项添加一个帮助信息,当mouseover或focus时激活帮助信息
效果:如下图所示
程序实现:
/*
2007-01-30 lisq custom tooltip
use age:
<script src="/modules/commons/js/prototype.js"></script>
<script src="/modules/commons/js/tooltip.js"></script>
var config = new ToolTip.Config($('A0101'), '人员姓名', 400)
var arrConfig = []
arrConfig.push(config)
var tootip = ToolTip.Init(arrConfig)
*/
Event.observe(window, 'load', function(){
var div = document.createElement('div')
div.id = 'ToolTipID'
var divIntroTopLine = document.createElement('div')
divIntroTopLine.id = 'divIntroTopLine'
div.appendChild(divIntroTopLine)
var divIntroArrow = document.createElement('div')
divIntroArrow.id = 'divIntroArrow'
divIntroTopLine.appendChild(divIntroArrow)
var divIntroContent = document.createElement('div')
divIntroContent.id = 'divIntroContent'
divIntroContent.innerHTML = 'hello world'
div.appendChild(divIntroContent)
ToolTip.Container = div
ToolTip.ContainerContent = divIntroContent
document.body.appendChild(div)
Element.hide(div)
}, false)
var ToolTip = {
Config : function(ele, tip, width){
this.ele = ele
ele.config = this
this.tip = tip
this.width = width
},
Init : function(arrConfig){
for(var i=0; i<arrConfig.length; i++){
var config = arrConfig[i]
if(!config || !config.ele || !config.tip)
continue
config.ele.tip = config.tip
config.ele.onmouseover = ToolTip.MouseOver
config.ele.onmouseout = ToolTip.MouseOut
config.ele.onfocus = ToolTip.MouseOver
config.ele.onblur = ToolTip.MouseOut
}
},
MouseOver : function(){
ToolTip.Container.style.width = this.config.width
ToolTip.ContainerContent.innerHTML = this.tip
var arr = Position.positionedOffset(this)
eToolTip = $('ToolTipID')
eToolTip.style.left = arr[0] - 50
eToolTip.style.top = arr[1] + 21
Element.show(eToolTip)
},
MouseOut : function(){
eToolTip = $('ToolTipID')
Element.hide(eToolTip)
}
}
2007-01-30 lisq custom tooltip
use age:
<script src="/modules/commons/js/prototype.js"></script>
<script src="/modules/commons/js/tooltip.js"></script>
var config = new ToolTip.Config($('A0101'), '人员姓名', 400)
var arrConfig = []
arrConfig.push(config)
var tootip = ToolTip.Init(arrConfig)
*/
Event.observe(window, 'load', function(){
var div = document.createElement('div')
div.id = 'ToolTipID'
var divIntroTopLine = document.createElement('div')
divIntroTopLine.id = 'divIntroTopLine'
div.appendChild(divIntroTopLine)
var divIntroArrow = document.createElement('div')
divIntroArrow.id = 'divIntroArrow'
divIntroTopLine.appendChild(divIntroArrow)
var divIntroContent = document.createElement('div')
divIntroContent.id = 'divIntroContent'
divIntroContent.innerHTML = 'hello world'
div.appendChild(divIntroContent)
ToolTip.Container = div
ToolTip.ContainerContent = divIntroContent
document.body.appendChild(div)
Element.hide(div)
}, false)
var ToolTip = {
Config : function(ele, tip, width){
this.ele = ele
ele.config = this
this.tip = tip
this.width = width
},
Init : function(arrConfig){
for(var i=0; i<arrConfig.length; i++){
var config = arrConfig[i]
if(!config || !config.ele || !config.tip)
continue
config.ele.tip = config.tip
config.ele.onmouseover = ToolTip.MouseOver
config.ele.onmouseout = ToolTip.MouseOut
config.ele.onfocus = ToolTip.MouseOver
config.ele.onblur = ToolTip.MouseOut
}
},
MouseOver : function(){
ToolTip.Container.style.width = this.config.width
ToolTip.ContainerContent.innerHTML = this.tip
var arr = Position.positionedOffset(this)
eToolTip = $('ToolTipID')
eToolTip.style.left = arr[0] - 50
eToolTip.style.top = arr[1] + 21
Element.show(eToolTip)
},
MouseOut : function(){
eToolTip = $('ToolTipID')
Element.hide(eToolTip)
}
}
调用:
var config = new ToolTip.Config(fieldInput, field.HelpInfo, 150)
ToolTip.Init([config])
ToolTip.Init([config])
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!