web-dev-qa-db-ja.com

jQueryUIツールチップで改行する方法

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

公式サイトには a demo があります。

マウスカーソルをYour ageテキスト<input>、表示されるツールチップはテキスト入力とオーバーラップします。これがウィジェットの望ましい動作かどうかはわかりません。テキスト入力の右側にとどまり、必要に応じて行を分割してください。

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

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

jqueryjquery-uitooltip
28
woraphol.j

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

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

Position オブジェクト、特にcollision属性を変更して、コントロールを他の場所に強制的に配置できます。 。ツールチップのデフォルトはflipfitです。これは、デフォルト（右側）が収まらない場合は左側flipになりますその位置を試してみて、それが何にも衝突しない場合は、コントロールをウィンドウのエッジから離してfitにしてみてください。その結果、今では_<input>_と衝突します。長いツールチップを強制的にラップするオプションはないようです。

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

_max-width_を使用してカスタムCSSクラスを構成に追加して、強制的にラップします。次に例を示します。

JavaScript

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

CSS

_.tooltip {
    max-width:256px;
}
_

または、タイトル属性にハード改行_<br/>_を挿入します。たとえば、

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

Edit：したがって、jQueryUIはツールチップcontentオプションをv1.9とv1.10の間で変更したようです（ 変更ログ による）。参考のため、ここに違いがあります。

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

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

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

また、 jsFiddle demo を参照してください。

52
andyb

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

ツールチップを持ちたいすべてのアイテムにはクラス 'jqtooltip'があり、タイトルタグがあり、タイトルには行区切りのパイプ文字があると仮定しています。

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});
14
Scott R. Frost

@Taruのソリューションに似たjQuery 2.1.1のソリューションがあります。

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

それで、onload、私はこれをします：

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

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

<div title="first<br/>second<br/>">hover me</div>
12
ivan-k

これは動作します：

[〜＃〜] 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"
    }
});
2
Taru