28

新しいバージョンのjQueryUI（1.9）には、ネイティブのツールチップウィジェットが付属しています。それでテストした後、コンテンツ（タイトル属性の値）が短い場合は正常に機能します。ただし、コンテンツが長い場合、ツールチップが表示されると、入力テキストとオーバーラップします。

公式サイトにデモがあります。

マウスカーソルを[年齢]テキスト<input>の上に置くと、表示されるツールチップがテキスト入力と重なります。これがウィジェットの望ましい動作であるかどうかはわかりません。テキスト入力の右側にとどまり、必要に応じて改行を入れてください。

編集：ツールチップをより適切に配置するために位置コードが更新されたjQueryUI v1.10を使用するようにデモが更新されたため、デモページに元の問題が表示されなくなりました-http://api.jqueryui.com/tooltip/#を参照してくださいオプション位置

jsFiddleで元の問題のデモを再作成しました。

4

5 に答える 5

52

ツールチップの配置はjQueryUIPositionオブジェクトによって制御され、デフォルト設定は次のとおりです。

{ my: "left+15 center", at: "right center", collision: "flipfit" }

位置オブジェクト、特にcollision属性を変更して、コントロールを別の場所に強制的に配置することができます。ツールチップのデフォルトはflipfitです。これは、デフォルト（右側）が適合しない場合は左に反転してその位置を試し、それが何とも衝突しない場合は、コントロールを離して適合させることを意味します。ウィンドウの端。その結果、。と衝突するようになりました<input>。長いツールチップを巧みにラップするオプションはないようです。

ただし、コンテンツをラップする方法は2つあります。

max-width強制的に折り返すには、カスタムCSSクラスを構成に追加します。次に例を示します。

JavaScript

$('input').tooltip({
    tooltipClass:'tooltip'
});

CSS

.tooltip {
    max-width:256px;
}

<br/>または、たとえば、title属性にハード改行を挿入します

title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit"

編集： jQueryUIがツールチップコンテンツオプションをv1.9とv1.10の間で変更したようです（ changelogによる）。参考までに、違いは次のとおりです。

v1.9.2

content: function() {
    return $( this ).attr( "title" );
}

v1.10

content: function() {
    // support: IE<9, Opera in jQuery <1.7
    // .text() can't accept undefined, so coerce to a string
    var title = $( this ).attr( "title" ) || "";
    // Escape title, since we're going from an attribute to raw HTML
    return $( "<a>" ).text( title ).html();
}

したがって、次のように使用することで、 title属性<br/>のタグをエスケープしない古い機能を元に戻すことができます。.tooltip()

$('input').tooltip({
    content: function() {
        return $(this).attr('title');
    }
});

また、jsFiddleデモも参照してください。

于 2012-10-25T12:45:57.847 に答える
14

これは、最新のjquery/jqueryuiでそれを行うための私のトリックです

ツールチップに必要なすべてのアイテムにクラス「jqtooltip」があり、タイトルタグがあり、タイトルに行区切り文字のパイプ文字があることを前提としています。

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});
于 2013-04-18T20:40:20.663 に答える
12

@Taruのソリューションと同様に、jQuery2.1.1のソリューションがあります。

基本的に、要素からデータを動的に取得するには、ツールチップのコンテンツ呼び出しを使用する必要があります。要素自体には、任意のhtmlマークアップを含めることができます。インポートする必要があることに注意してください

だから、オンロード、私はこれを行います：

$(function() {
    $( document ).tooltip({
      content:function(){
        return this.getAttribute("title");
      }
    });
  });

そして私の例の要素はこれです：

<div title="first<br/>second<br/>">hover me</div>
于 2014-09-13T04:11:54.330 に答える
2

これは機能します：

HTML

<div class="produtos">
    <div class="produtos_imagem">
        <img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descrição: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/>
    </div>
    <p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p>
</div>

JavaScript

$(document).tooltip({
    content: function() {
        var element = $( this );
        if ( element.is( "[title]" ) ) {
            return element.attr( "title" );
        }
    },
    position: {
        my: "center bottom-20",
        at: "center top"
    }
});
于 2013-04-15T21:13:22.037 に答える
0

ツールチップウィジェット（バージョン1.13）の公式jQuery UIのドキュメントhttps://api.jqueryui.com/tooltip/によると、この構文を使用して、改行付きのhtmlコンテンツを設定しました。

$( ".selector" ).tooltip( "option", "content", "1st line.<br />2nd line.<br />3rd line." );

それは私の側ではうまくいきます。また、タイトル属性の値によってコンテンツを評価することを目的とした、ここ
で andybによって提供されるソリューションも機能します。

$('input').tooltip({
 content: function() {
    return $(this).attr('title');
 }
});
于 2021-10-18T20:42:46.493 に答える