ツールチップ内に改行を追加する

170

HTMLツールチップ内で改行を追加するにはどうすればよいですか？

ツールチップ内で次のように使用<br/>してみました\n：

<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>

しかし、これは無用だったと私はリテラルテキスト見ることができた<br/>と\nツールチップの中に。どんな提案も参考になります。

html  tooltip  newline 
— アーカシュ・チャクラヴァルティ
ソース
3
同じ質問がありました。stackoverflow.com
— San
1
<pre> data-html = "true" </ pre>を使用してくださいRefと
— Thanks
asp.net（C＃.NET 4.5 Framework）で追加Environment.NewLineすると、コード側から改行が追加されます...大騒ぎせず..
— Dan B

回答:

271

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

— フレッドセネーゼ
ソース
17
エンティティコードの場合＆＃013; 機能しない場合は＆＃10;をお試しください 私はLinuxとChromeを使用していますが、他のブラウザーについては不明です
— Krishna
3
私はこれを試してみましたが、inspect要素を使用して挿入すると機能しますが、htmlに含めてこのキャラクターで展開すると機能しません。私が見逃しているかもしれない明らかな理由はありますか？
— Riaan Schutte 2017
1
私にとって&#10のWindows、クロームV53に私のために仕事をdin't。しかし、&#013;うまくいきました。
— ラッキー
9
私は両方のバージョンを使用しただけで&#013;&#010;、非常にうまく機能しているようです:)
— Phe0nix 2017
6
＆＃013; Firefox v58では機能しません。ただし、＆＃10は正常に動作します。必要に応じて両方の改行を使用する@ Phe0nixソリューションを使用すると、Chrome、Microsoft Edge、Firefoxで正常に機能します。
— かなりクール
69

データ属性を追加するだけです

data-html = "true"

そして、あなたは行ってもいいです。

例えば。使用法：

<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>

これは、私が今試したツールチッププラグインの大部分で機能しています。

— シワリク
ソース
3
タイトルテキストに<br />を指定したdata-html = "true"は完全に機能します。
— viks
1
上記の解決策のどれも私にとってうまくいきませんでした。しかし、これはうまくいきます。
— アビー
64

&#013;スタイルと組み合わせて空白：事前ライン; 私のために働いた。

— GuitarWorker
ソース
3
私はこれを機能させるためにしばらく費やしました。white-space: pre-line;スタイルが必要であるという事実は非常に隠されています。
— ジムD
@JimDスタイルルールをどのクラス/要素に適用する必要がありますか？
— Judah Meek
私にとっては、これはツールチップのカスタムCSSなしで問題なく機能します。
— ST-DDT
2
これはあなたが友達を探しているものです。
— Henrik Petterson 2017年
3
実際には、キャラクターは&#010;次のとおりです。stackoverflow.com
— Henrik Petterson
10

付け\nたテキストの間。すべてのブラウザで動作します。

Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";

これは私にとってはうまくいき、コードビハインドで使用されます。

これがあなたのために働くことを願っています

— プリヤンカタクル
ソース
4

JavaScriptバージョン

ため&#013;である（HTML）0D（16進数）、これはのように表すことができます。'\u000d'

str = str.replace(/\n/g, '\u000d');

加えて、

他の回答の参照のおかげでそのキャラクターに置き換わるAngularJSフィルターをみんなと共有する\n

app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});

使用法

<div title="{{ message | titleLineBreaker }}"> </div>
— ジョセフ・ハルシュ
ソース
4

タイトルに\ nを使用し、このCSSを追加するだけです

.tooltip-inner {
    white-space: pre-wrap;
}
— ダヌシュカ
ソース
3

data-html = "true"を追加するだけです

<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
— バボ・ダルビニアン
ソース
2

タイトル属性を複数行に広げることで、ネイティブHTMLツールチップ内に改行を追加できます。

ただし、Q-Tip：http : //craigsworks.com/projects/qtip/などのjQueryツールチッププラグインを使用することをお勧めします。

セットアップと使用は簡単です。あるいは、無料のJavaScriptツールチッププラグインもたくさんあります。

編集：最初のステートメントの修正。

— ロス
ソース
2

私にとっては、次のように2段階のソリューション（タイトルのフォーマットとスタイルの追加の組み合わせ）が機能しました。

1）titleattrbiuteをフォーマットします。

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

2）このスタイルをtips要素に追加します。

white-space: pre-line;

IE8、Firefox 22、およびSafari 5.1.7でテスト済み。

— ユーザー2052547
ソース
コードに改行を入れるのは面倒だと思います
— Fandango68
2

このコードスニペットをスクリプトに追加するだけです。

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

そしてもちろん、上記の回答で述べたように、あるdata-htmlべきです"true"。これにより、title属性の値内でHTMLタグとフォーマットを使用できるようになります。

— それをコード化する
ソース
+1、ソリューションが機能しました。私のサンプルコード： data-toggle="tooltip" data-html="true" title="some string <br/> some string"。
— Pranesh Janarthanan
👍ことを聞いて良い
— コードそれまでの
1

Jquery Tooltipユーティリティを使用している場合は、「jquery-ui.js」JavaScriptファイルで次のテキストを検索します。

tooltip.find(".ui-tooltip-content").html(content);

その上に置きます

content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');

これがあなたにも役立つことを願っています。

— user2160658
ソース
1

したがって、bootstrap4を使用している場合、これは機能します。

<style>
   .tooltip-inner {
    white-space: pre-wrap;
   }

</style>

<script> 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>

<a data-toggle="tooltip" data-placement="auto" title=" first line &#010; next line" href= ""> Hover me </a>

Djangoプロジェクトで使用している場合は、次のようなツールチップに動的データを表示することもできます。

<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>
— マヤンク・チャウハン
ソース
0

私のための解決策はhttp://jqueryui.com/tooltip/でした：

そして、ここでコード（<br/>Works を作成するスクリプトの部分は「コンテンツ：」です）：

HTMLヘッド

<head runat="server">
    <script src="../Scripts/jquery-2.0.3.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
    /*Position:
      my =>  at
      at => element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
</script>
</head>

ASPXまたはHTMLコントロール

<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>

これが誰かを助けることを願っています

— ディエゴP
ソース
0

jquery-ui 1.11.4を使用している場合：

var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        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
Replace-->  //return $( "<a>" ).text( title ).html();
by -->      return $( "<a>" ).html( title );
             },
— ピーター
ソース
0 
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

uib-tooltip、uib-tooltip-template、uib-tooltip-html

- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template

私の場合、私はuib-tooltip-htmlを選択し、それに 3つの部分があります：

  1. 構成
  2. コントローラ
  3. HTML

例：

(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

<div ng-controller="myController as get">
     <span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>

詳しくはこちらをご確認ください

— オモスタン
ソース
0

.text（）の代わりに.html（）を使用するとうまくいきました。例えば

.html("This is a first line." + "<br/>" + "This is a second line.")
— ラージ・スタ
ソース
0

使用&#13;はうまくいくはずです（私はChrome、Firefox、Edgeでテストしました）：

let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
    favTitle += users[j].username + "&#13;";

$("#item").append('<i title="In favorite users: &#13;' + favTitle + '">Favorite</i>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>
スニペットを展開

— ノウレイン
ソース
0

こんにちはこのコードはすべてのブラウザで動作します!!私はクロムとサファリの新しい行とIEのul liに使用されます 

 function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '<li>';
              const liEnd = '</li>';
              const bullet = '&#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='<ul>'
              const unOrderListEnd='</ul>'
              const fakeNewline = '&#013;&#010;';
              for (let i = 0; i < values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }
— Abhinavxeon
ソース
0

ブートストラップツールチップを使用でき、htmlオプションをtrueに設定することを忘れないでください。

<div id="tool"> tooltip</div>
$('#tool').tooltip({
     title: 'line one' +'<br />'+ 'line two',
     html: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
— アミン
ソース
-1

このCSSはあなたを助けます。

    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }
— アディル・ハレル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.