ブートストラップツールチップを使用してホバーにXMLタグを表示

Question

私がやっていることは、下の例のようにタイトル属性にXMLスニペットを表示することです。

私はdata-html="true"を削除するか、それを修正しますfalseに設定する知っているが、私はまた、title属性で<strong style=color:red;>XML Tag: </strong>

表示するXMLスニペットが唯一の目的を表示するためのものであるようである私のタイトルにラベルを持っている必要があります。それは機能的なものではありません。

• 私はツールチップ data-html属性からXMLタグを除外することができます方法はありますか？
• または私はタグ<strong></strong>を使用せずに私のタイトルラベルの赤い色と 太字を作ることができるので、私はちょうど がfalseにdata-htmlを設定回すことができる任意のトリックはありますか？

ホバー時の

予想される出力：

XMLタグ：<note> XMLは、データを運ぶために設計されました - どのようなデータに焦点を当てた</note>

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

a{ 
 
display:block; 
 
width: 200px; 
 
margin:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 

 
<a href="#" data-html="true" data-toggle="tooltip" data-placement="bottom" title="<strong style=color:red;>XML Tag: </strong>&#60;note&#62;XML was designed to carry data - with focus on what data is&#60;&#47;note&#62;">Hover to see what is XML</a>

Answer 1

ここでXMPのhtmlタグを参考にしてください。 XMPタグ内のHTMLはレンダリングされません。見栄えを良くするために少し書式設定する必要があるかもしれません。これは推奨されていませんが、多かれ少なかれ、すべてのブラウザで動作するようです。将来の互換性を完全にしたい場合は、2番目のオプションを使用してください。

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

a{ 
 
display:block; 
 
width: 200px; 
 
margin:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 

 
<a href="#" data-html="true" data-toggle="tooltip" data-placement="bottom" title="<strong style=color:red;>XML Tag: </strong><xmp>&#60;note&#62;XML was designed to carry data - with focus on what data is&#60;&#47;note&#62;</xmp>">Hover to see what is XML</a>

別のオプションは、など国境を削除せずに、それはかなり恐ろしい見た目ほど、それはテキスト領域を好きではない/良く見えるように <textarea>とスタイルテキストエリアにすべてを投げることです

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

a{ 
 
display:block; 
 
width: 200px; 
 
margin:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 

 
<a href="#" data-html="true" data-toggle="tooltip" data-placement="bottom" title="<strong style=color:red;>XML Tag: </strong><textarea>&#60;note&#62;XML was designed to carry data - with focus on what data is&#60;&#47;note&#62;</textarea>">Hover to see what is XML</a>