特殊字符在引导工具提示标题 data-html 中不起作用答案

【问题标题】：special characters not working in bootstrap tooltip title data-html true特殊字符在引导工具提示标题 data-html 中不起作用
【发布时间】：2018-11-26 13:14:19
【问题描述】：

当我使用 data-html="true" 作为标题时，我遇到了引导工具提示标题的问题。我在工具提示标题中使用 html 标签作为字体样式和换行符。为此，我使用了data-html="true"。但是，当我使用后不显示工具提示标题文本

<html><head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div class="container">
             <h3>Tooltip Example</h3>
             <a href="#" data-html="true" data-toggle="tooltip" data-original-title="title with <br /> special character <less than over me Hooray!">Tooltip </a>
          </div>
          <script>
             $(document).ready(function(){
                 $('[data-toggle="tooltip"]').tooltip();   
             });
          </script>
       </body>
</html>

【问题讨论】：

您的示例似乎格式错误且未正确突出显示。另外，我最好使用代码游乐场网站，例如codepen.io 设置示例。
您的意思是您希望在工具提示文本中显示 <。
李斯特山，感谢您的回复。提示标题将动态出现，而不是静态文本。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

 <html><head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div class="container">
             <h3>Tooltip Example</h3>
             <a href="#" data-html="true" data-toggle="tooltip" data-original-title='title with <br/> special character < less than over me Hooray!'>Tooltip </a>
          </div>
          <script>
             $(document).ready(function(){
                 $('[data-toggle="tooltip"]').tooltip();   
             });
          </script>
       </body>
</html>`

只需在特殊字符和单词之间留出空格。其他的它将被解析为 html 标签或使用&lt。

【讨论】：

感谢 sumesh，但工具提示标题是动态放置的。
@BaluP 使用字符串操作函数查找和替换可能的特殊字符
在这个演示中它工作了，将看到它在实时情况下的效果，因为操作函数不应干扰其他 html 标签，如
和
@BaluP 使用与 java、javascript 程序的特殊字符相对应的 unicode。参考rapidtables.com/code/text/unicode-characters.html