Twitter Bootstrap Question posted in

Twitter bootstrap – How to escape html inside a html tooltip

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).

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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();
    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search