30

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

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>
4

8 に答える 8

63

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

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

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

于 2014-08-28T08:37:56.383 に答える
17

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

于 2013-01-30T08:35:14.417 に答える
15

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

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

ツールチップ ウィジェットの「コンテンツ」オプションを使用できます。以下も参照してください。

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

短い例:

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });
于 2013-01-30T08:34:34.300 に答える
7

HTML を Title 属性に直接入力して、次のように呼び出すことができます。

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

このようにして、HTML はエスケープされて文字どおりに記述される代わりにレンダリングされます。

于 2013-10-02T08:41:45.280 に答える
2

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

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

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

于 2013-06-10T12:36:25.333 に答える