前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Tootip小程序,整理一下自己用

Tootip小程序,整理一下自己用

作者头像
用户1183026
发布2018-01-19 09:51:13
9130
发布2018-01-19 09:51:13
举报
文章被收录于专栏:布尔

需求:给表单每个信息项添加一个帮助信息,当mouseover或focus时激活帮助信息 效果:如下图所示

程序实现:

代码语言:javascript
复制
/*
    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)
    }
}

调用:

代码语言:javascript
复制
var config = new ToolTip.Config(fieldInput, field.HelpInfo, 150)
            ToolTip.Init([config])
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2007-06-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档