如何在 html 工具提示中转义 html [重复]答案

【问题标题】：How to escape html inside a html tooltip [duplicate]如何在 html 工具提示中转义 html [重复]
【发布时间】：2015-05-28 20:00:21
【问题描述】：

我正在尝试使用 HTML 打印工具提示，但我需要对其中一些 html 进行分隔。我尝试了一些东西，但没有成功。

这是我的例子：http://jsfiddle.net/wrsantos/q3o1e4ut/1/

在本例中，我想转义 中的所有 html。

<span rel="tooltip" 
    data-toggle="tooltip" 
    data-trigger="hover" 
    data-placement="bottom" 
    data-html="true" 
    data-title="<table><tr><td style='color:red;'>complex&nbsp;</td><td>HTML:</td></tr></table><code>&lt;html&gt;</code>">
    hover over me to see html
</span>

Javascript：

$('[rel="tooltip"]').tooltip();

编辑：

这不是与 (Can I use complex HTML with Twitter Bootstrap's Tooltip?) 的重复

我想要类似于 html 和非 html 工具提示的“混合模式”。

在工具提示中，我将有程式化的内容和非程式化的内容（非程式化的内容将在 标记内）。

【问题讨论】：

这不是重复的。我需要一些 html 并转义其他的。我先检查了这个线程。
我使用了这个例子。但请注意我放了一个 标签，我想转义这个标签内的 html。这是另一回事。
@DLeh 请查看我的问题。看看我的例子和我的编辑。我的问题与stackoverflow.com/questions/13704789/… 不重复。这是一个不同的问题。

标签： javascript html twitter-bootstrap-3

【解决方案1】：

应该这样做。

var el = $('[rel="tooltip"]');
var escaped = $('<div/>').text(el.attr('data-title')).html();
el.attr('data-title', escaped);
el.tooltip();

编辑：我误解了你想要做什么。要转义 <code> 标记内的内容，请执行以下操作：

var el = $('[rel="tooltip"]');
var title = el.attr('data-title');
var code = /<code>(.*?)<\/code>/.exec(title)[1];
var escaped = $('<div/>').text(code).html();
title = title.replace(/<code>.*?<\/code>/, '<code>' + escaped + '</code>');
el.attr('data-title', title);
el.tooltip();

【讨论】：

我测试了您的编辑，但没有奏效。看看我的小提琴更新：jsfiddle.net/wrsantos/q3o1e4ut/4
是的，对不起，那是废话。我已经编辑了我的编辑。
这是一个更灵活的版本，可以使用多个<code> 标签：jsfiddle.net/q3o1e4ut/8
是的，你最后的 jsfiddle 帮了我很多忙！感谢您的帮助。

【解决方案2】：

如果您的工具提示中需要富媒体，那么我个人只会使用 JQUERY、HTML Div 标签和 CSS 来构建它。它很简单，可以让你创造任何你喜欢的东西。这是一个给你的例子。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p>
<a href="#" title="That&apos;s what this widget is">Tooltips</a> 
can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little             
 box next to the element, just like a native tooltip.
</p>
<p>
But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery      
 UI&apos;s theme builder application">ThemeRoller</a>

 will also style tooltips accordingly.
 </p>
 <p>
 Tooltips are also useful for form elements, to show some additional      
 information in the context of each field.</p>
 <p>
 <label for="age">Your age:</label>

   <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>

【讨论】：

【解决方案3】：

您必须在工具提示的声明中添加它：

$('[rel="tooltip"]').attr('data-title', $('[rel="tooltip"]').attr('data-title') + "<code>&lt;html&gt;</code>").tooltip();

从 HTML 中删除它：

<span rel="tooltip" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" data-html="true" data-title="<table><tr><td style='color:red;'>complex&nbsp;</td><td>HTML:</td></tr></table>">
    hover over me to see 
    <code>&lt;html&gt;</code>
</span>

小提琴：http://jsfiddle.net/q3o1e4ut/7/

【讨论】：