web-dev-qa-db-ja.com

jQueryツールチップは改行を追加します

そこで、いくつかの<br/>があるdivのコンテンツを取得し、jQueryツールチップウィジェットを使用してタイトル属性として渡します。ツールチップ内で線が上下に表示されるようにします。 THX。これまでのコードは次のとおりです。

[〜＃〜] css [〜＃〜]

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

[〜＃〜] html [〜＃〜]

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>
javascriptjqueryhtmljquery-uijquery-plugins
23
ChrisGP

ツールチップウィジェットの「コンテンツ」オプションを使用できます。こちらもご覧ください：

http://jqueryui.com/tooltip/#custom-content

短い例：

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });
10
Teun Lassche

純粋なCSSソリューションがあります。改行には\ nを使用し、次のCSSスタイルを追加します。

.ui-tooltip {
    white-space: pre-line;
}

空白を保持したい場合は、プリラインの代わりにプリまたはプリラップを使用することもできます。 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space を参照してください

54
zooglash

これは、最新のjquery/jqueryuiでそれを行うための私のトリックです（ツールチップに必要なすべてのアイテムにはクラス 'jqtooltip'があり、タイトルタグがあり、タイトルには行区切りのパイプ文字があると仮定します：

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

タイトル属性の改行にエンティティ&#10;を使用するだけです。

15
Ravi Gadag

HTMLをTitle属性に直接入力し、次を呼び出すだけです。

$(document).tooltip({
  content: function (callback) {
     callback($(this).prop('title'));
  }
});

これにより、HTMLがエスケープされ、文字通りに記述される代わりにレンダリングされます。

6
JDandChips

これを使用する方が良い：

_$(document).tooltip({
   content: function () {
     return $( this ).prop( 'title' ).replace( '|', '<br />' );
   }
});
_

function(callback)で、閉じていないツールチップに問題がありました

3
user3411211

ScottRFrostの回答の修正版を使用しました。彼の例の問題は、.replaceが文字列内の文字の最初のインスタンスのみを置き換えることです。これは、正規表現の/ g（グローバル）を使用して、文字列全体の文字のすべてのインスタンスを変更する変更バージョンです。

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});
2
LukeP

私はこれを使用しました：

        $("[title]").each(function(){
            $(this).tooltip({ content: $(this).attr("title")});
        });

これは、タイトル属性を持つすべての要素がjqueryツールチップを使用し、ツールチップのコンテンツがタイトル属性の値を使用することを意味します。コンテンツはhtmlを許可します。

2
Ronen Festinger