View Full Version : How to render escape character in data-qtip as plain text

15 Dec 2016, 11:22 PM
Hi all,

I have tried to use ExtJS 4.2 to create text with data-qtip.
My input text may contains escape character e.g. <, >, &, ', ", ... etc. or may look like HTML code e.g. <b>, <a>,.. etc.
I would like to show output and it's data-qtip as plain text

For example "<b>bold</b>".

Following is example code:

HTML code:

<div id="test">Test</div>
<div id="forShow" style="color:red;cursor:pointer"></div>

Javascript code:

Ext.get('test).on('click', function(){

function toShow()
var message = "<b>bold</b>";
// var tooltip = 'tooltip:' + message + ' (unformatted tooltip)';
message = Ext.String.htmlEncode(message);
var tooltip = 'tooltip:' + message + ' (formatted tooltip)';

Ext.get('forShow').update(showMessage(message, tooltip));

function showMessage(value, tooltip)
return '<div data-qtip="' + tooltip + '">' + value + '</div>';

When I click "Test", output "<b>bold</b>" will be shown.
However, when I mouse over the output, the tooltip message "bold" will be shown as bold style in html format (not plain text "<b>bold</b>").

var message = "<b>bold</b>";
var tooltip1 = message; // unformatted tooltip
var tooltip2 = Ext.String.htmlEncode(message); // formatted tooltip

tooltip1 and tootip2 are rendered as same output (bold style in HTML format).

Please see https://fiddle.sencha.com/#fiddle/1mm8&view for more details.

How can I render escape character in data-qtip as plain text?

Thanks in advance

Gary Schlosberg
16 Dec 2016, 2:26 PM
You'd have to use HTML entity names or numbers:

18 Dec 2016, 7:37 PM
Thank Gary,

However, can I use data-qtip attribute with entity name or number?
I have tried to use following code:

'<div data-qtip="' + formatted tooltip + '">' + formatted value +'</div>';

For example:

'<div data-qtip="My Content has no &lt;b&gt;no&lt;/b&gt; HTML">Test no &lt;HTML&gt;</div>';

'<div data-qtip="My Content has no &#60;b&#62;no&#60;/b&#62; HTML">Test no &lt;HTML&gt;</div>';

'<div data-qtip="My Content has no &lt;b&gt;no&#60;/b&#62; HTML">Test no &lt;HTML&gt;</div>';

Please see:https://fiddle.sencha.com/#view/editor&fiddle/1mm8

There are many codes like above in my javascript.
The raw tooltip and value come from server dynamically.
I have tried to format them before creating HTML content.
The formatted value is rendered as plain text correctly but the formatted tooltip is still rendered as HTML when using data-qtip, although I have replaced special characters with entity name or entity number.


Gary Schlosberg
21 Dec 2016, 3:35 PM
It seems strange, but it works if you encode the qtip value twice:

21 Dec 2016, 5:08 PM
Thank you very much Gary. :)
It seems strange but it work fine as you say!