Letractively / tooltips

Automatically exported from code.google.com/p/tooltips
0 stars 0 forks source link

The tip cant render html, but it should. #7

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
1. put html markup in the tip
2. specifically, an img tag

What is the expected output? What do you see instead?
an image shoud display

What version of the product are you using? On what operating system?
various versions, various browsers

Please provide any additional information below.
its probably not even a feature, lol. but i'd like it to be!

Original issue reported on code.google.com by skateasy...@gmail.com on 12 Oct 2007 at 12:21

GoogleCodeExporter commented 8 years ago
I ran into this same issue. I wanted to have a bold header for the tooltip, 
follwed 
by a <br /> and then the tooltip. After tracing it back, I found that the issue 
is 
with the _text: function(text) method in the builder.js. It is using the 
document.createTextNode() method. To get the tooltip to render html tags, 
change the 
_text: function(text) method to the following...

_text: function(text) {
     var ele = document.createElement("span");
     ele.innerHTML = text;
     return ele;
     //ORIGINAL::IGNORES HTML TAGS
     //return document.createTextNode(text);
  },

I also tested this with an image tag and it works like a charm. I tested this 
and it 
works with both IE7 and Firefox 2.0.0.7

Original comment by charlie....@enersys.com on 12 Oct 2007 at 1:15

GoogleCodeExporter commented 8 years ago
Nice fix, sucks you have to modify builder.js and not tooltips.js, inst there a 
method in builder we call instead of _text?

Original comment by justink...@gmail.com on 28 Oct 2007 at 2:12

GoogleCodeExporter commented 8 years ago
[deleted comment]
GoogleCodeExporter commented 8 years ago
There is a way to do this in Tooltip.js.
Change the this row:
Builder.node("div", {className: "xboxcontent", style: "background-color:" + 
this.options.backgroundColor + 
    "; border-color:" + this.options.borderColor + 
    ((this.options.textColor != '') ? "; color:" + this.options.textColor : "") 
+ 
    ((this.options.textShadowColor != '') ? "; text-shadow:2px 2px 0" + 
this.options.textShadowColor + ";" : "")}, this.content), 

to:
this.content_div = Builder.node("div", {className: "xboxcontent", style: 
"background-
color:" + this.options.backgroundColor + 
    "; border-color:" + this.options.borderColor + 
    ((this.options.textColor != '') ? "; color:" + this.options.textColor : "") 
+ 
    ((this.options.textShadowColor != '') ? "; text-shadow:2px 2px 0" + 
this.options.textShadowColor + ";" : "")}), 

Insert:
this.content_div.innerHTML = this.content;

before:
document.body.insertBefore(this.tooltip, document.body.childNodes[0]);

Original comment by ado...@gmail.com on 2 Nov 2007 at 3:40

GoogleCodeExporter commented 8 years ago
Nice fix, thanks! Hopefully they'll implement this in the next release.

Original comment by ianwl...@gmail.com on 13 Dec 2007 at 9:40

GoogleCodeExporter commented 8 years ago
[deleted comment]
GoogleCodeExporter commented 8 years ago
adoryc, your solution works great but not on winzozz browser :(

Original comment by fabio.pe...@gmail.com on 19 Jun 2008 at 4:05

GoogleCodeExporter commented 8 years ago
sorry adoryc: it was my fault, your solution works perfectly on ff, ie6, ie7.

Thank you!

Original comment by fabio.pe...@gmail.com on 20 Jun 2008 at 9:09

GoogleCodeExporter commented 8 years ago
I've made the fix referred to in comment 4, but it does not work in FF3. Anyone
having the same issue? 

Original comment by eightsev...@gmail.com on 24 Jun 2008 at 2:39

GoogleCodeExporter commented 8 years ago
The comment 4 fix is cool. It works on my Firefox on Linux too!

Original comment by mittipro...@gmail.com on 27 Sep 2008 at 8:39

GoogleCodeExporter commented 8 years ago
Comment 4 fix works fine

Original comment by iyap...@gmail.com on 16 Sep 2010 at 2:08