关闭

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

标签: jquerybootstrap
282人阅读 评论(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.">



0
0
查看评论

jquery hover鼠标划过实现列表页文章内容部分显示隐藏及全部显示切换

测试代码 Medicine University of Oxford 3上海蓝蜗网络科技有限公司,专业网站建设,html5建站上海蓝蜗网络科技有限公司,专业网站建设,html5建站上海蓝蜗网络科技有限公司,专业网站建设,html5建站上海蓝蜗网络科技有限公司,专业网站建设,html5建站上海蓝蜗...
  • viqecel
  • viqecel
  • 2015-11-20 10:01
  • 1158

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

css #tooltipdiv {  position: absolute;  border: 1px solid #333;  background: #f7f5d1;  padding: 3px 3px 3px 3px;  color...
  • billhepeng
  • billhepeng
  • 2012-04-14 19:54
  • 8186

jquery实现鼠标移上去某元素显示隐藏的内容,移除继续隐藏

假设鼠标滑过A元素(id =”a”), B元素(id=”b”) 显示 鼠标在A、B元素区域时 B元素一直显示 鼠标离开A、B元素区域 B元素隐藏$(document).ready(function(){ $('#a').hover(function() { ...
  • wangbo0922
  • wangbo0922
  • 2017-07-17 14:36
  • 264

将行内超出内容进行隐藏,并在鼠标移至行时显示全部内容

通过 CSS 样式设置多余内容省略
  • qq_36484521
  • qq_36484521
  • 2016-12-28 15:25
  • 178

jquery 鼠标移到图片弹出浮动层显示大图片

在做项目的时候大家会遇到这种情况:页面中需要显示图片,但是原图片有比较大为了页面的排版只能对图片进行压缩,而在页面中又需要能够看清图片内容。这种情况就用到了下面要讲的“jquery 鼠标移到图片弹出浮动层显示大图片”。      比较简单就直接贴代码了:bigImgSh...
  • jinrizk
  • jinrizk
  • 2015-04-14 16:26
  • 3311

jquery鼠标放上去显示悬浮层(弹出div层)定位

鸣谢:http://jooner.lofter.com/post/eceee_555ebe jquery鼠标放上去显示悬浮层(弹出div层)定位 function show(obj,id) {       ...
  • Hollboy
  • Hollboy
  • 2014-04-11 10:21
  • 12908

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

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

超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容

Div+css: 用截取的方法,标题只显示十个字符,剩下的用…表示,鼠标放上去之后,会显示全部内容。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
  • gongzhufanlulu
  • gongzhufanlulu
  • 2017-02-20 11:02
  • 1962

jquery控制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息

$(获取到需要弹出浮动框的元素obj).hover(function () { //鼠标移动时 //获取到需要弹出浮动框的元素obj divobj = document.getElementById(obj); ...
  • smartsmile2012
  • smartsmile2012
  • 2012-08-28 14:08
  • 6885

扩展:easyui datagrid鼠标经过提示单元格内容

原文地址:http://www.easyui.info/archives/796.html 扩展:datagrid鼠标经过提示单元格内容 实现代码: /** * 扩展两个方法 */ $.extend($.fn.datagrid.methods, { /** ...
  • aa1049372051
  • aa1049372051
  • 2014-04-03 09:46
  • 7030
    个人资料
    • 访问:7965次
    • 积分:333
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:7篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论