文档章节

mTips思维导图插件使用异常:给元素添加提示不现实

开源中国首席有志青年
 开源中国首席有志青年
发布于 2018/04/12 10:12
字数 338
阅读 46
收藏 0

最近在写前端代码时用到一个很好用的提示框插件mTips

遇到一个问题就是用下面addTipTopLeft方法给一个节点添加提示,提示显示不出来(有时会闪现提示)。但是同样的方法给其它元素添加提示就会显示出来。

//屏幕左上角的提示
	function addTipTopLeft(node, tip, color) {
		var el = 'jmnode[nodeid=' + node + ']';
		$(el).on('mouseenter', function (e) {
			mTips.c.x = -e.pageY + 20;
			mTips.c.y = -e.pageX + 30;

			//显示提示
			mTips.s(tip, color);
		});

		$(el).on('mouseleave', function (e) {
			mTips.h();
			mTips.c.x = 10;
			mTips.c.y = 10;
		});
	}

经过一番琢磨后发现,原来是的提示内容太多了,模态框把鼠标悬停的元素遮住,这样鼠标焦点不在目标元素上,自然就无法显示提示了,于是我增加了一个方法,把提示改为右上角显示,这样就提示框就不会覆盖到目标元素,问题也成功解决了。

//屏幕右上的提示
	function addTipTopRight(node, tip, color) {
		var el = 'jmnode[nodeid=' + node + ']';
		$(el).on('mouseenter', function (e) {
			//屏幕宽
			var screenWidth = document.body.clientWidth;
			//屏幕高
			var screenHeight = document.body.clientHeight;
			mTips.c.x = -e.pageY + screenHeight/2;
			mTips.c.y = -e.pageX + screenWidth/2;

			//显示提示
			mTips.s(tip, color);
		});

		$(el).on('mouseleave', function (e) {
			mTips.h();
			mTips.c.x = 10;
			mTips.c.y = 10;
		});
	}

果然代码没有玄学啊!

© 著作权归作者所有

开源中国首席有志青年
粉丝 6
博文 16
码字总数 11020
作品 0
杭州
程序员
私信 提问
轻量级团队协作工具 Kooteam 0.1.0 发布-新增Markdown编辑器

本次依旧是一次稳定性版本发布,简化应用部署流程,内置静态资源服务,解除nginx依赖,主要更新如下。 更新记录 1. 知识库,增加markdown编辑器 2. 修复流程图图形全选异常 3. 修复钉钉插件,...

小小胖
01/11
1K
0
提高效率,eclipse上你可能不知道的技巧

一张思维导图 公众号回复“eclipse技巧”可下载源导图 1、控制台(console )日志输出另保存 经常会遇到这种情况,习惯性的清掉控制台上的输出日志,再然后发现刚才的日志居然还有用,不得不又...

java思维导图
2017/10/20
729
0
新版XMind 7的画布属性有何变化

 XMind 由6升级到7后,它其中的有些功能也随之改变,有些功能是使用起来更加的方便,从用户的角度考虑来添加设计,今天小编和大家来解析一下他的新增加的功能XMind7的画布属性,   我们打...

xmind
2015/11/06
244
0
教你如何快速激活思维导图 xmind7.5?

点击查看:XMind 7.5激活补丁 xmind7.5 激活补丁是一款功能强大、并能够专门激活xmind7.5思维导图软件的激活补丁软件。XMind Pro 7.5是一款由中国&香港 XMind Ltd 团队独立开发的商业思维导图...

龙彪无敌
2018/05/08
0
0
电话也可以定制思维导图?

 很多人在打重要电话时会作记录。以商务电话为例,它可能会非常复杂,如果你没准备好的话,很容易漏掉某些信息。同样,如果你在准备一次休假,你可能也需要简要记下你旅行路线的细节。绘制打...

xmind
2015/10/12
128
0

没有更多内容

加载失败,请刷新页面

加载更多

搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https://blog.51cto.com/kaliarch/2044618 一、概述 1.1 背景 ......

linjin200
10分钟前
1
0
CDH6.0.1集成tez-0.9.1计算引擎

参考文章: https://www.jianshu.com/p/9fb9f32e1f0f https://www.baidu.com/link?url=OgpwasnZi7H1dySN2T111sseEWDBaCCTC3DFV61G7756YbrkJCA8Y3UFaueyqnfN&wd=&eqid=daeb8b3500049cf3000000......

Sheav
12分钟前
1
0
Vue内置指令的使用

v-model(数据绑定) v-model常用于表单数据的双向绑定,它本质上是一个语法糖。它主要的有两种应用: 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用 <div id="app"> ...

凌兮洛
12分钟前
1
0
外部来源应用检查-烦死了,终于找到解决设置了

Android 连接usb调试应用的时候: 华为关闭方法:1、设置-安全-更多安全设置,关掉外部来源应用检查。2、设置-系统-开发人员选项-关闭“监控ADB安装应用” 不知道OPPO 怎么关闭的?...

QGlaunch
13分钟前
2
0
6个K8s日志系统建设中的典型问题,你遇到过几个?

作者 | 元乙 阿里云日志服务数据采集客户端负责人,目前采集客户端 logtail 在集团百万规模部署,每天采集上万应用数 PB 数据,经历多次双 11、双 12 考验。 导读:随着 K8s 不断更新迭代,使...

阿里云官方博客
16分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部