Question

我正在尝试使用HTML打印工具提示，但我需要了解其中一些HTML。我尝试了一些但没有成功。

以下是我的示例：http://jsfiddle.net/wrsantos/q3o1e4ut/1/

在这个例子中，我想要转义＆lt; code＆gt;中的所有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工具提示中获得类似“混合模式”的内容。

在工具提示中，我将提供程式化内容和非风格化内容（非风格化内容将位于＆lt; code＆gt;标记内）。

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

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

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

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

如何在html工具提示中转义html

3 个答案: