PDA

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



earist
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.tip.QuickTipManager.init();
Ext.get('test).on('click', function(){
toShow();
});

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
earist

Gary Schlosberg
16 Dec 2016, 2:26 PM
You'd have to use HTML entity names or numbers:
https://fiddle.sencha.com/#view/editor&fiddle/1mom
http://www.w3schools.com/html/html_entities.asp

earist
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>';
or

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

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


Thanks
earist

Gary Schlosberg
21 Dec 2016, 3:35 PM
It seems strange, but it works if you encode the qtip value twice:
https://fiddle.sencha.com/#view/editor&fiddle/1n1g

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

earist.