jquery悬停,鼠标移上去显示全部内容(包括多余隐藏内容)

标签: jquery bootstrap
668人阅读 评论(0) 收藏 举报

1.bootrap的悬停显示

   只需要引入bootstrap的js,css即可。关键代码

 $('a').tooltip({title: "我是一个提示框,我在顶部出现",placement: "top"});

 优点:好看,适用于单个。

2.jqury的悬停显示

   只需要引入jquery.js,小demo如下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  
</head>
<body>
 
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
	<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
 
 
</body>
</html>
关键代码如下:

$(function() {
    $( document ).tooltip();
  });
 意思是在加个title,就能悬停显示title里面的内容
<input id="age" title="We ask for your age only for statistical purposes.">



查看评论

【code】jQuery实现鼠标滑过标题显示其后内容

鼠标滑过事件
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2015-12-09 15:28:59
  • 2363

jQuery鼠标悬停显示提示信息窗口

鼠标悬停显示提示信息窗口,又一个基于jQuery的层特效,当把鼠标放在文字上的时候,会显示一个提示层,带逐渐放大的动画效果,这种弹出层可用来制作提示特效,还可以用于菜单导航,jQuery层特效奉献给大...
  • life66881
  • life66881
  • 2015-03-13 13:07:39
  • 1615

鼠标悬浮事件 -jQuery hover()方法

js代码 var differentindex = 999; $(document).ready(function(){ $(".name").hover(func...
  • z1729734271
  • z1729734271
  • 2016-09-14 18:25:08
  • 13249

JQuery-鼠标悬停显示全部内容

一、效果        跟随鼠标移动,显示内容也移动。 我就是我,是颜色不一样的烟火! 二、实现思想       利用Jquery中mouseover、mousemove、mouseout...
  • zhengyanan110
  • zhengyanan110
  • 2017-08-04 09:45:42
  • 271

FineReport 单元格显示内容太多,默认显示一定内容,多余的鼠标悬停显示全部

单元格右键——其他属性——内容提示——   =$$$   预览 鼠标悬停
  • qq_30009669
  • qq_30009669
  • 2017-01-23 10:59:48
  • 1311

CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示

标签: 首先需要在table中设置table-layout:fixed; "table-layout:fixed"> 然后在表头th中设置每列的宽度 "table-layout:f...
  • sanbingyutuoniao123
  • sanbingyutuoniao123
  • 2015-12-04 14:38:09
  • 6947

鼠标放上去显示全部文字,不放上去,显示部分文字jquery效果,包括隐藏部分文字

$('div.divmatnrdesc').live('mouseover', function(e) {    text=$(this).text();    tooltip = " "+te...
  • ahzxj2012
  • ahzxj2012
  • 2013-10-10 23:16:24
  • 1773

表格td内容过多时,td显示省略号,鼠标移入显示全部内容。

两种方式显示: 1.title方式显示:           .tb{width:800px;font-size:12px;background:#6887D9}   .tb thead...
  • zhangyan8120399100
  • zhangyan8120399100
  • 2016-06-13 17:08:03
  • 6962

jquery 实现超出部分隐藏,鼠标移动上显示全部文字

jquery 实现超出部分隐藏,鼠标移动上显示全部文字
  • arlanhon
  • arlanhon
  • 2014-09-15 11:27:51
  • 3009

[jquery实例] 鼠标悬停显示当前隐藏元素

将鼠标放在列表中的其中一个元素上,即刻显示当前鼠标下的隐藏列表元素:// 鼠标悬停显示隐藏元素 $(document).ready(function(){ $("当前元素的class或者id"...
  • xjtarzan
  • xjtarzan
  • 2015-06-15 09:34:06
  • 407
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 457
    排名: 10万+
    最新评论