Menu
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 </td><td>HTML:</td></tr></table><code><html></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).
643
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();
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'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'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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
