多行jquery工具提示

如何让自定义jquery工具提示显示为多行，并调整为固定宽度？所以它不会排成一行（如果'title'属性很长）。因为现在，如果我编写长'标题'属性，工具提示显示在一条长线上，并且无论工具提示元素的宽度是多少。多行jquery工具提示

我的代码，以获得更好的理解要问什么我：

jQuery代码：

$(document).ready(function() { 
    $("body").append("<div class='tip'></div>"); 
    $("p[title]").each(function() { 
     $(this).hover(function(e) { 
     $().mousemove(function(e) { 
      var tipY = e.pageY + 16; 
      var tipX = e.pageX + 16; 
      $(".tip").css({'top': tipY, 'left': tipX}); 
     }); 
     $(".tip") 
     .html($(this).attr('title')) 
     .stop(true,true) 
     .fadeIn("fast"); 
     $(this).removeAttr('title'); 
    }, function() { 
     $(".tip") 
     .stop(true,true) 
     .fadeOut("fast"); 
     $(this).attr('title', $(".tip").html()); 
    }); 
    }); 
});

来源

2013-03-04 Andrius

愚蠢的我。我以为我用固定的宽度...我现在把它和它似乎工作。对于那个很抱歉。 – Andrius 2013-03-04 13:03:55

好的，然后投票结束这个问题。 – yckart 2013-03-04 13:05:53

我会，需要等10分钟来选择答案。 – Andrius 2013-03-04 13:10:29

设置的工具提示框max-width？

max-width: 100px;

也将高度设置为auto，这样会增加需要

height: auto;

文本随后将换到下一行。

看到这个fiddle

来源

2013-03-04 13:03:29 CR41G14

谢谢，我以为我使用这个，但我没有:)。 – Andrius 2013-03-04 13:04:53

使用此css

div.tip{ 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    width:100px; 

    border: 2px solid #FF0000; 
    background-color: #FF9999; 
    display: none; 
    padding: 3px; 
}

小提琴：http://jsfiddle.net/8XttH/2/

来源

2013-03-04 13:04:22

多行jquery工具提示

回答

相关问题