鼠标移上去显示全部内容

引入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();

复制代码

转载于:https://juejin.im/post/5b3de4fee51d4519226f20d5