javascript - 多行 jquery 工具提示

Question

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

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

http://jsfiddle.net/8XttH/

j查询代码:

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

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

查看此 fiddle