javascript - Hur man undviker html inuti en html-tooltip

Jag försöker skriva ut en tooltip med HTML, men jag behöver undvika vissa av dessa HTML. Jag har försökt något men utan framgång.

Här är mitt exempel: http://jsfiddle.net/wrsantos/q3o1e4ut/1/

I detta exempel vill jag undkomma all html inne i <code>.

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

REDIGERA:

detta är inte en duplicat för (Kan jag använda komplex HTML med Twitter Bootstraps Tooltip?)

Jag vill ha något som ett "blandat läge" från HTML- och icke-HTML-tooltip.

I en verktygstips kommer jag att ha stiliserat innehåll och icke-stiliserat innehåll (det icke-stiliserade innehållet kommer att vara inne i en <code>-tagg).

Svar #1

Det borde räcka.

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

REDIGERA: Jag missförstod vad du försökte göra. För att bara undkomma det som finns inuti <code>-taggen, gör så här:

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

Svar #2

Om du behöver rik media i ditt verktygstips, skulle jag personligen bara använda JQUERY, HTML Div-taggar och CSS för att bygga det. Det är tillräckligt enkelt och gör att du kan skapa vad du vill. Här är ett exempel för dig.

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