使用 bootstrap 工具提示在悬停时显示 XML 标签

Question

我想做的是在我的标题属性中显示一个 XML 片段，如下例所示。

我知道删除 data-html="true" 或将其设置为 false 会解决问题，但我还需要在我的标题中添加一个标签，例如 <strong style=color:red;>XML Tag: </strong>

在 title 属性中显示 XML 片段仅用于显示目的。它并不打算发挥作用。

有什么方法可以从工具提示中排除 XML 标签 data-html属性?
或者有什么技巧可以让我的标题标签变成红色和粗体而不使用标签 <strong></strong>，所以我可以直接转将 data-html 设置为 false?

悬停期间的预期输出：

XML Tag: <note>XML was designed to carry data - with focus on what data </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 都不会呈现。您可能需要对其进行一些格式化以使其看起来更好。它已被弃用，但似乎仍可在或多或少的所有浏览器中使用。如果您想要完全的未来兼容性，请使用第二个选项。

$(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> 并设置文本区域的样式，使其看起来 better/not 像文本区域，因为在不移除边框等的情况下看起来非常糟糕

$(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>

使用 bootstrap 工具提示在悬停时显示 XML 标签

Show XML tags on hover using bootstrap tooltip

html

css

jquery

twitter-bootstrap-tooltip

twitter-bootstrap-3