多行jquery工具提示

Question

如何使自定義jquery工具提示顯示為調整為固定寬度的多行？ 所以它不會進入一個長行（如果'title'屬性很長）。 因為現在如果我寫了很長的'title'屬性，工具提示會顯示在一個長行上，並且設置為tooltip元素的寬度無關緊要。

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

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;

同時將高度設置為auto，以便根據需要增加

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/