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. 配置tomcat-users

    <role rolename="admin-gui"/><role rolename="admin-script"/><role ...

  2. Java异常机制关键字总结,及throws 和 throw 的区别

    在Java的异常机制中,时常出现五个关键字:try , catch , throw , throws , finally. 下面将总结各个关键字的用法,以及throw和throws的区别: (1) t ...

  3. Hibernate3.3.2_ID生成策略

    1,xml生成id generator:常用四个:native.identity.sequence.uuid. Annotation: 1,@GeneratedValue: a)自定义ID b)AUT ...

  4. WPF 自定义ScrollViwer

    ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,ScrollViewer简单来说分两部分,一个横向的滚动条,一个垂直滚动条 ...

  5. json test

    public static void main(String[] args) { class B { String name; public String getName() { return nam ...

  6. selector.select()和selector.selectedKeys()

    当调用selector.select()时会阻塞: This method performs a blocking selection operation. It returns only after ...

  7. 【LeetCode题解】7_反转整数

    目录 [LeetCode题解]7_反转整数 描述 方法一 思路 Java 实现 类似的 Java 实现 Python 实现 方法二:转化为求字符串的倒序 Java 实现 Python 实现 [Leet ...

  8. JAVA练手--集合

    集合框架体系如图所示 Collections:是一个工具类java.util.Collections(可以使用它对集合对象进行操作) Collection:除了map(键值对)其他集合的父类 1. S ...

  9. json跨域问题

    一.跨域问题的原因: 1 浏览器的检查 2 跨域 3 XMLHttpRequest请求 二.跨域问题的解决: 1 禁止浏览器检查: 使用dos命令,在启动浏览器的时候,加一个参数: chrome -- ...

  10. JavaScript中自定义函数以及文本框、radio、下拉框的值的获取,结合淘宝竞拍案例来理解。。。

    淘宝竞拍案例: HTML部分代码: <form action="#" method="post"> <h2>欢迎进入淘宝竞拍</h ...