多行jquery工具提示

Question

How to make custom jquery tooltip appear as multiple line that adjusts to fixed width? So it not go in one long line (if 'title' attribute is very long). Because Now if I write long 'title' attribute, tooltip is displayed on one long line and it does not matter what width is set to tooltip element.

My code to get better understanding of what I'm asking:

http://jsfiddle.net/8XttH/

jquery code:

$(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

Set a max-width on the tool tip box?

max-width: 100px;

Also set the height to auto so it increases as needed

height: auto;

The text will then wrap to the next line.

See this fiddle

Answer 2

Use this css

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

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

Fiddle: http://jsfiddle.net/8XttH/2/