1

カスタムjqueryツールチップを固定幅に調整する複数の行として表示するにはどうすればよいですか? そのため、1 行に収まりません ('title' 属性が非常に長い場合)。これで、'title' 属性を長く書くと、ツールチップは 1 行に表示され、ツールチップ要素にどのような幅が設定されていてもかまいません。

私が求めていることをよりよく理解するための私のコード:

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

2 に答える 2

3

max-widthツール チップ ボックスに を設定しますか?

max-width: 100px;

また、高さを自動に設定して、必要に応じて増加させます

height: auto;

テキストは次の行に折り返されます。

このフィドルを参照してください

于 2013-03-04T13:03:29.877 に答える
1

これを使って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/

于 2013-03-04T13:04:22.607 に答える