工作遇到一個問題就是文本太多然後導致自適應大小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>