使用引导工具提示在悬停时显示 XML 标记

Question

我要做的是在我的标题属性中显示一个 XML sn-p，如下例所示。

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

在标题属性中显示 XML sn-p 仅用于显示目的。它并不打算发挥作用。

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

悬停期间的预期输出：

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 都不会被呈现。您可能需要对其进行一些格式化以使其看起来更好。它已被弃用，但似乎在或多或少的所有浏览器中仍然有效。如果您希望将来完全兼容，请使用第二个选项。

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