页面增加问号图标,鼠标放置会提示文字信息。（记录日志）

先上图

css样式

/*提示框*/
#mytitle {position: absolute;color: #ffffff;max-width: 160px;font-size: 14px;padding: 4px;background: rgba(40, 40, 40, 0.8);border: solid 1px #e9f7f6;border-radius:5px;
}

jsp页面
<img src="../images/question.png" class="mytooltip" title="这是一段提示的详细信息,内容待确定" style="position: absolute;top: 10px; right: 30px; width: 15px;cursor:pointer;">

实现这种效果的js代码

$(function () {var x = 10;var y = 20;var newtitle = '';var mytitleId = '';$('img.mytooltip').mouseover(function (e) {newtitle = this.title;this.title = '';$('body').append('<div id="mytitle" >' + newtitle + '</div>');$('#mytitle').css({'left': (e.pageX + x + 'px'),'top': (e.pageY + y - 80 + 'px')}).show();}).mouseout(function () {this.title = newtitle;$('#mytitle').remove();}).mousemove(function (e) {mytitleId = this.id;if (mytitleId=="pdl" || mytitleId=="ptv"){$('#mytitle').css({'left': (e.pageX + x +10 + 'px'),// 'top': (e.pageY + y - 60 + 'px')'top': (e.pageY + y - 120 + 'px')}).show();}else{$('#mytitle').css({'left': (e.pageX + x +10 + 'px'),'top': (e.pageY + y - 60 + 'px')// 'top': (e.pageY + y - 110 + 'px')}).show();}})
});

页面增加问号图标,鼠标放置会提示文字信息。（记录日志）相关推荐

HTML文字溢出显示省略号和鼠标放在文字上显示全部文字信息
代码 <div th:title="${stampDetail.stampData}" style="white-space: nowrap;overflow: h ...
span标签的鼠标滑入提示_html鼠标悬停提示文字 div a span均适用
扩展阅读学习�?/strong>�?a href="//www.css5.com.cn/html/939.shtml" class="blue">h ...
vue2 ElementUI 表单标签、表格表头添加问号图标提示
文章目录 1. 问题背景 2. element-ui悬浮提示定义 3. 基础 4. 延申 5. 参考 1. 问题背景使用element-ui有时候需要对表格的表头.表单的标签进行自定义,添加问号的悬 ...
elementui 表格上加小问号鼠标移入提示文字
<el-table-columnalign="center"prop="efficiency"sortable="custom"lab ...
ant-design中form组件的item在typescript环境下自定义提示文字（Form.Item的tooltip属性）及提示图标
一. 实现效果代码环境:react.typescript.ant-design-react ant-design-react中用到的组件为Form 想要实现的效果如下图: 上图中: ① 每个labe ...
页面增加html,为静态页面HTML增加session功能
一般来说,只有服务器端的CGI程序(ASP.PHP.JSP)具有session会话功能,用来保存用户在网站期间(会话)的活动数据信息,而对于数量众多的静态页面(HTML)来说,只能使用客户端的cook ...
easyx鼠标放置前按钮颜色_七种正确使用鼠标的好习惯，让你摆脱鼠标手的痛苦...
今天千知de妈妈给大家讲讲鼠标手的危害和如何正确使用鼠标的方法,避免妈妈们在不知不觉中得上"鼠标手"! 什么是鼠标手? 腕管综合征(carpal tunnel syndrome,C ...
让UpdatePanel支持上传文件：解决当页面显式设置document.domain时提示的500错误
最近在做一个项目,需要在UpdatePanel中上载文件,在网络上找了一下,发现有老赵写的AjaxUploadHelper,一开始工作的很好:开发时使用localhost来进行测试的,一切正常:但部署 ...
elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息
目的:elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息项目经理要求表格头部添加一个图标,鼠标移入提示用户字段包含的内容信息,以前没有开发过,故总结一下. 添加方法: 方法一 ...
unity 鼠标放置 ui_ui层次结构以及不常见但至关重要的任务放置在哪里
unity 鼠标放置 ui Modern technology is complex. It's not always complicated though, thanks to our consta ...

页面增加问号图标,鼠标放置会提示文字信息。（记录日志）

页面增加问号图标,鼠标放置会提示文字信息。（记录日志）相关推荐

最新文章

热门文章