如何在html工具提示[duplicate]中转义html

This question already has an answer here:

这个问题已经有了答案:

Can I use complex HTML with Twitter Bootstrap's Tooltip? 5 answers
我可以使用复杂的HTML与Twitter引导的工具提示吗?5个回答

I'm trying to print a tooltip with HTML, but I need to espace some of these html. I tried something but without success.

我正在尝试用HTML打印一个工具提示，但是我需要对其中的一些HTML进行空间定位。我试过了，但没有成功。

Here is my example: http://jsfiddle.net/wrsantos/q3o1e4ut/1/

这里是我的示例:http://jsfiddle.net/wrsantos/q3o1e4ut/1/

In this example I want to escape all html inside of <code>.

在这个例子中，我想要从 <代码> 中退出所有的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();

EDIT:

编辑:

this is not a duplicate for (Can I use complex HTML with Twitter Bootstrap's Tooltip?)

这不是一个副本(我可以使用复杂的HTML和Twitter Bootstrap的工具提示吗?)

I want something like a "mixed mode" from html and non html tooltip.

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

In a tooltip I will have stylized content and non stylized content (the non stylized content will be inside a <code> tag).

在工具提示中，我将使用程式化的内容和非程式化的内容(非程式化的内容将包含在标记中)。

3 个解决方案

#1

This should do it.

这应该这样做。

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

EDIT: I misunderstood what you were trying to do. To escape just what's inside the <code> tag, do this:

编辑:我误解你的意思了。要转义标记中的内容，请执行以下操作:

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();

#2

If you are needing rich media in your tool tip, then I would personally just use JQUERY, HTML Div tags and CSS to build it. Its simple enough and will allow you to create anything you like. Here is an example for you.

如果您需要丰富的媒体在您的工具提示，那么我个人将使用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

You have to add it in the declaration of the tooltip:

您必须在工具提示声明中添加:

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

Remove it from the HTML:

从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>

FIDDLE: http://jsfiddle.net/q3o1e4ut/7/

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

#1