鼠标移上去显示全部内容

红太狼 2021-04-19 14:36 584阅读 0赞

**引入js文件 **

(function($){
       $.fn.toolTip = function(options) {
          
          //Providing plugin defaults 
          
          var defaults = {
             background: '#1e2227',
             color: '#fff',
             opacity: '0.8'
          },
          
           options = $.extend(defaults, options);
            
            // Always return the jQuery object to allow for chainability. 
            
           return this.each(function() {
             var elem = $(this);
             
             //grab the title attribute
             
           var title = elem.attr('title');
           
          //only show the tooltip when the title is not empty    
                   
             if(title != '') {
                
                //creating the tooltip div
                
             var tooltip = $('<div id="tooltip" />');
             
             //Remove the title attribute's to avoid the native tooltip from the browser elem.attr('title',''); // mouse over elem.hover(function(e) { tooltip.hide().appendTo('body') .html(title) .hide() .css({ 'background-color' : options.background, 'color' : options.color, 'opacity' : options.opacity, }) .fadeIn(500); }, // mouse out function() { tooltip.remove(); //remove the tooltip }); } //mouse move the tooltip will follow the cursor //get X & Y position of the cursor elem.mouseenter(function(e) { if(e.target.innerHTML){ tooltip.css({ top: e.pageY + 10, left: e.pageX + 20, }); } }); }); } })(jQuery);

**css样式**

css
    /*鼠标移上title弹出框*/
    /*title弹出框*/
    //id名不用定义
    #tooltip { 
        border: 1px solid #444;
        font-size: 14px;
        max-width: 205px;
        padding:1em;
        position: absolute;
        z-index:2500;
        text-shadow:none;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        word-break: break-all;
    }

**html写法**

//desc后台取来的数据，
    <td class='tooltip' title='"+json.data[i].desc+"'>" +tailorContent(json.data[i].desc,15)+"</td>//js代码
    $(".tooltip").toolTip();

发表评论取消回复

表情：

评论列表（有 0 条评论，584人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS之鼠标移上去的时候改变背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

ゝ一世哀愁。/ 2022年07月12日 02:46/ 0 赞/ 140 阅读

相关 JS之鼠标移上显示，鼠标移开隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

我不是女神ヾ/ 2022年07月12日 02:46/ 0 赞/ 644 阅读

相关 JS之鼠标移上去的时候改变背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

以你之姓@/ 2022年07月12日 02:46/ 0 赞/ 190 阅读

相关 JS之鼠标移上显示，鼠标移开隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

淩亂°似流年/ 2022年07月12日 02:46/ 0 赞/ 267 阅读

相关 html动态添加需要显示的内容/文字过多，超出部分以省略号显示，鼠标移入时全部显示

表格中有时某个元素里内容会很多，多到影响了整个页面布局的情况，除了写死在html中的内容，只要是动态添加的数据都很有可能会发生这种情况，举个例子简单说一下自己目前的处理方法，

雨点打透心脏的1/2处/ 2022年06月02日 02:38/ 0 赞/ 671 阅读

相关列表显示, 内容过长省略显示, 鼠标停留在内容上显示全部内容

<td id="com" title='{ {item.com}}' style="text-overflow: ellipsis; white-spac

男娘i/ 2022年04月17日 05:07/ 0 赞/ 268 阅读

相关 layui鼠标移上去的hover效果tips

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

待我称王封你为后i/ 2022年03月28日 10:26/ 0 赞/ 940 阅读

相关 table内容超长自动隐藏，鼠标放置后浮动显示全部内容

目录问题描述解决思路相关代码 1.限定td的宽度 2.内容特殊处理 3.全局指定动态指定css样式 4.效果如下延伸贴两个关于rem/em/px介绍

梦里梦外;/ 2022年03月19日 16:57/ 0 赞/ 331 阅读

相关 td标签显示过多内容隐藏部分内容为省略号，鼠标悬停显示全部内容

样式： \c\_td\{ max-width:10px; overflow: hidden; white-spa

灰太狼/ 2021年11月29日 16:18/ 0 赞/ 511 阅读

相关鼠标移上去显示全部内容

引入js文件 (function($){ $.fn.toolTip = function(options) { //Providing plugin ...

红太狼/ 2021年04月19日 14:36/ 0 赞/ 585 阅读