javascript - 多行 jquery 工具提示

Question

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

我的代码可以更好地理解我的要求：

http://jsfiddle.net/8XttH/

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());
    });
  });   
});

Answer 1

max-width在工具提示框上设置一个？

max-width: 100px;

还将高度设置为自动，以便根据需要增加

height: auto;

然后文本将换行到下一行。

看到这个小提琴

Answer 2

用这个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/