工作遇到一个问题就是文本太多然后导致自适应大小input的框变形,然后就想用Qtip2来解决当文本多的时候,隐藏一部分,然后鼠标放上去再显示全部。下面是Qtip2的使用案例和效果(更多相关内容可以浏览官网)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>qTip2 Example</title>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://qtip2.com/v/stable/jquery.qtip.css"/>
<script>
$(function(){
$('.selector').qtip({
content: 'I have a longer fade in duration and slideUp to hide!!I have a longer fade in duration and slideUp to hide',
show: {
effect: function() {
$(this).fadeTo(500, 1);
}
},
hide: {
effect: function() {
$(this).slideUp();
}
}
});
});
</script>
</head>
<body>
<span class="selector">content......</span>
</body>
</html>