CSS部分

.help-tip{
width: 340px;
border:1px solid #A0A0A0;
background-color: #F8F8F8;
border-radius: 5px;
display: none;
position: absolute;
z-index:;
left:;
} .help-tip p{
margin: 5px 7px;
font-size: 13px;
color: black;
line-height: 1.2;
}

JS部分

function show(){
$(".help-tip").css("left", $(".help-tip").parent().width());
$(".help-tip").css("display","block");
}
function hide(){
$(".help-tip").css("display","none");
}

HTML部分

<div class="width:100px;height:50px;">
  <input onfocus="show()" onblur="hide()"/>
  <div class="help-tip">
    <p>This is a<br>Tip </p>
  </div>
</div>

javascript中简单提示框的更多相关文章

  1. JavaScript中简单排序总结

    JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...

  2. 活动中使用提示框(Toast)

    任务名称:活动中使用Toast 任务现象:点击button时,会弹出提示框:You Click Button 步骤 1.创建一个项目,新建活动和加载布局.参考: http://8c925c9a.wiz ...

  3. 解决input中智能提示框onblur与onclick冲突的问题

    背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下 ...

  4. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  5. echarts中tooltip提示框位置控制

    关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...

  6. Eclipse、MyEclipse中代码提示框颜色

    Matching breackets highlight = 匹配括号突出显示 Completion proposal background = 提示框背景色 Completion proposal ...

  7. javascript中的弹框

    大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...

  8. [easyui] - 在easyui的table中展示提示框

    因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...

  9. ECharts地图中tooltip提示框通过formatter分别显示多个数值

    我原来的CSDN博客上写过这篇文章:http://blog.csdn.net/giscript/article/details/52162165 但是现在发现了代码中存在一个bug,在此更正. 按照原 ...

随机推荐

  1. (转)DB2性能优化 – 如何通过调整锁参数优化锁升级

    原文:http://blog.51cto.com/5063935/2074306 1.概念描述 所谓的锁升级(lock escalation),是数据库的一种作用机制,为了节约内存的开销, 其会将为数 ...

  2. AngularJS Eclipse Plugin

    本文介绍如何安装和配置 AngularJS Eclipse.AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference engine ...

  3. pip 更换国内源

    centos 下 没有找到 pip.conf 操作如下: 进入主目录:cd ~ 创建 .pip 目录: mkdir .pip 进入.pip 创建 pip.conf 文件:cd .pip/ touch ...

  4. QuestaSim自动化仿真之do文件

    一.编写基本的do文件 下面按照实际仿真的步骤来说明do文件中需要用到的各个tcl命令. 1.quit -sim ---- 退出原来的仿真工程: 2.cd ---- 设置工作目录的路径,就是仿真工程路 ...

  5. 腾讯云技术专家卢萌凯手把手教你Demo一个人脸识别程序!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文来自腾讯云技术沙龙,本次沙龙主题为Serverless架构开发与SCF部署实践 卢萌凯:毕业于东南大学,曾就职于华为,熟悉云行业解决方案 ...

  6. Field [_id] is a metadata field and cannot be added inside a document. Use the index API request parameters--转

    https://github.com/elasticquent/Elasticquent/issues/53 the data is coming from a Mongo DB instance. ...

  7. Eclipse常用快捷键之代码编辑篇

    Eclipse是Java开发常用的IDE工具,熟练使用快捷键可以提高开发效率,使得编码工作事半功倍,下面介绍几种常用的代码编辑和补全工具 重命名快捷键:Alt+Shift+R 可用于类名,方法名,属性 ...

  8. ashx 绝对路径得到物理路径

    //先得到模板页所在的路径 string phyPath = context.Server.MapPath("/p02style.html"); //得到模板的所有内容 strin ...

  9. vmware创建centos虚拟机

    下载centos 安装之前你需要下载centos镜像:http://mirrors.aliyun.com/ 创建虚拟机 如果还没有安装vmware请参考:https://www.cnblogs.com ...

  10. git远程易错点

    git pull下来用git branch -r查看远程分支才有数据 解决方案:指定当前工作目录工作分支,跟远程的仓库,分支之间的链接关系. 比如我们设置master对应远程仓库的master分支 g ...