[RESOLVED] 2 Pieces of HTML5 with Tooltip. One works the other doesn't

[Penfound]

I am hoping that one of you keen-eyed people out there will be able to tell me what is wrong with this code. I have a number of these <articles> created dynamically from a desktop application. They are laid out on the page according to their birth positions in family which is why the absolute position is different.

The first <article> works perfectly and the second piece fails to show any tooltip.

<article id='aparent' onmouseover="Tip('<b>Born:</b>Colchester, Essex<br><b>Died:</b>Not Known<br><b>Work:</b>Not Known')" onmouseout="UnTip()" style='position:absolute;margin-left:12px;margin-top:120px;background-color:MistyRose'>
<img style='border:none;float:left'; id='mugshot' src='images/smallfemale.png'>
<div class='name' style='' >Elizabeth Kate PITT (216)</>
<div class='born' style='padding-top:10px;'><b>Born: </b>abt 1885</>
<div class='died' style='padding-top:10px;'><b>Died: </b></>
</article>

<article id='aparent' onmouseover="Tip('<b>Born:</b>St. John's Moulsham, Chelmsford<br><b>Died:</b>Not Known<br><b>Work:</b>Not Known')" onmouseout="UnTip()" style='position:absolute;margin-left:12px;margin-top:230px;background-color:LightCyan'>
<img style='border:none;float:left'; id='mugshot' src='images/smallmale.png'>
<div class='name' style='' >Charles Frederick PITT (98)</>
<div class='born' style='padding-top:10px;'><b>Born: </b>ABT 1891</>
<div class='died' style='padding-top:10px;'><b>Died: </b></>
</article>

There has to be something different but I can't see what it is, can you?

Cheers
Penfound

[techgnome]

you broke the string:

Tip('<b>Born:</b>St. John's Moulsham,

See the 's after John? that tick marked closed out the string... so the only thing that got passed to the Tip function was "<b>Born:</b>St. John" ... the rest of the line fell out of the string, probably generating a javascript error, and then when it hot the ' after "Not Know" at what should have been the end of the string, it actually had the reverse effect....

Bottom line, if you need tick marks in a string in js, you need to escape them:

<article id='aparent' onmouseover="Tip('<b>Born:</b>St. John\'s Moulsham, Chelmsford<br><b>Died:</b>Not Known<br><b>Work:</b>Not Known')" onmouseout="UnTip()" style='position:absolute;margin-left:12px;margin-top:230px;background-color:LightCyan'>

-tg

[Penfound]

Thank you so much. A case of not seeing the wood for the trees.

Penfound