自定义title属性样式

在开发中表格中文字太长,我们会以省略号的形式展示,鼠标移动在文字上就显示全部,如果不用一般的UI框架,我们则会选择title属性来实现这个效果,如

然而这种样式有点...嘻嘻嘻

有些人就问了,可不可以修改默认的title属性样式呢?答案是: 不能。 如果需要写样式需要自定义写,下面我们就一起来实现吧,先看一个效果

这个就是,鼠标移动上去就显示当前的文字系列,主要是通过content: attr(data-title);

html结构

 <div class="table-tooltip">
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>24</td>
                </tr>
            </tbody>
        </table>
 </div>
<div class="tooltip-wp"></div>

css结构

 table{
       border-collapse: collapse;
 }
tooltip-wp{
      width: 200px;
      position: fixed;
      z-index: 100;
      display: none;
 }
.tooltip-wp:after{
      content: attr(data-title);
      position: absolute;
      left: 0;
      top: 0;
      max-width: 500px;
      background: blue;
      padding: 2px 5px;
      color: #fff;
      border-radius: 5px;
      word-break: break-all;
 }

  js部分

$(document).ready(function(){
      //鼠标滑过表格单元格显示浮动框
        var showFloatTimer=null;
        $(‘.table-tooltip tbody tr td‘).hover(
            function(event){
                clearTimeout(showFloatTimer);
                showFloatTimer=setTimeout(function(e){
                    $(‘.tooltip-wp‘).attr(‘data-title‘, event.currentTarget.innerHTML); //动态设置data-title属性
                    $(‘.tooltip-wp‘).fadeIn(200);//浮动框淡出
                },300);
            }
        );

        $(‘.table-tooltip tbody tr td‘).mouseout(function(){
            $(‘.tooltip-wp‘).hide();
            clearTimeout(showFloatTimer);//鼠标滑出时清除函数去抖中的定时事件
        });

        $(‘.table-tooltip tbody tr td‘).mousemove(floatMove());
        //floatMove()运行后返回一个函数对象,或什么都不返回

        function floatMove(){//节流函数
            var canRun=true;
            return function(e){//e是mousemove的event参数
                if(!canRun){return;}//如果有一个定时方法,直接返回
                canRun=false;
                setTimeout(function(){
                    var top = e.pageY+5;
                    var left = e.pageX+5;
                    $(‘.tooltip-wp‘).css({
                        ‘top‘ : top + ‘px‘,
                        ‘left‘: left+ ‘px‘
                    });
                    canRun=true;
                },150);
            }
        }
    });

  

原文地址:https://www.cnblogs.com/xiaolanschool/p/11425576.html

时间: 2024-10-28 11:38:24

自定义title属性样式的相关文章

CAD编辑器中怎么自定义文字属性样式

想问一下大家在编辑图纸的时候有没有遇到过这样的问题,就是在CAD绘图的时候,要给编辑的图纸中做一下特别的说明,但是CAD编辑器中原有的文字样式部署那么的符合,拿在CAD编辑器中怎么自定义文字属性样式?具体要怎么来进行操作?下面小编就来教教大家具体的操作,有兴趣的朋友可以来看看. 第一步:首先,打开电脑,看一下有电脑上有没有安装CAD编辑器.如果没有在电脑中打开一个浏览器,搜索框中搜索迅捷CAD编辑器,接着点击进入官网,点击下载安装最新版本的CAD编辑器. 第二步:然后在将刚刚安装完成的CAD编辑

a 标签中 title 属性样式修改

无文字描述,直接上测试页,看效果. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <style> 5 #tpli

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.

自定义input file样式

自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #file { display: none;

【android自定义控件】自定义View属性

1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 3这个步骤不是必须,当然了大部分情况下还是需要重写的. 1.自定义View的属性,首先在res/values/  下建立一个attrs.xml , 在里面定义我们的属性和声明我们的整个样式. <?xml version="1.0" encoding="utf-8"?> <resources> <attr name=&

[Swift通天遁地]九、拔剑吧-(3)创建多种自定义Segment分段样式的控件

本文将演示创建多种自定义Segment分段样式的控件. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'PagingMenuController' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开

UI--从学习styleable自定义view属性到一点儿更有意思的尝试

<代码里的世界> -UI篇 用文字札记描绘自己 android学习之路 转载请保留出处 by Qiao http://blog.csdn.net/qiaoidea/article/details/45599593 [导航] - 多行文本折叠展开 自定义布局View实现多行文本折叠和展开 1.概述 前面封装view的时候用到了自定义属性,觉得有必要单独讲一下这部分,但是呢,又不想向其他文章一样千篇一律地写这些东西.所以呢,后便会加一些临时的发散思维,引用点有意思的东西.分享东西嘛,随性点儿. 回

jQuery Validate 表单验证插件----自定义校验结果样式

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus