Question

如何使自定义jquery工具提示显示为调整为固定宽度的多行？所以它不是长篇大论（如果＆＃39; title＆＃39;属性很长）。因为如果我写了很长的标题＆＃39;属性，工具提示显示在一个长行上，与工具提示元素的宽度设置无关。

我的代码可以更好地理解我要问的内容：

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;

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

请参阅此fiddle

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/

多行jquery工具提示

2 个答案: