How to escape html inside a html tooltip

Question

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

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

In this example I want to escape all html inside of <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();

EDIT:

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

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

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

this is not a duplicate. I need some html and escape other ones. I checked this thread first. — wallybh, May 28 '15 at 20:26
I used this example. But please notice I put an tag and I want to escape the html inside this tag. It's a different thing. — wallybh, May 28 '15 at 20:28
@DLeh please review my question. Look my examples and my edits. My question is not a duplicate for http://stackoverflow.com/questions/13704789/can-i-use-complex-html-with-twitter-bootstraps-tooltip. Its a diferent problem. — wallybh, May 29 '15 at 17:06

vrmc · Accepted Answer · 2015-05-28T21:46:37.333

3

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

edited May 28 '15 at 21:46

answered May 28 '15 at 20:19

vrmc

321
1
6

1

i tested your edit, but does not worked. Look my fiddle update: http://jsfiddle.net/wrsantos/q3o1e4ut/4/ – wallybh May 28 '15 at 21:15
1

Yeah, sorry, that was crap. I've edited my edit. – vrmc May 28 '15 at 21:47
1

Here's a more flexible version that will work with multiple `` tags: http://jsfiddle.net/q3o1e4ut/8/ – vrmc May 29 '15 at 16:49
Yeah your last jsfiddle helped me alot! Thanks for your help. – wallybh May 29 '15 at 17:24

score 2 · Answer 2 · edited May 28 '15 at 20:59

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.

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

user2755140 · Answer 3 · 2015-05-28T21:39:38.837

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:

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

How to escape html inside a html tooltip

3 Answers3