Member Avatar for ForestTech

Ok, basically I have this giant, great, big, long variable and I still haven't learn the syntax for this sort of thing. How would I break this up? Basically, the variable is information that is being displayed in a tooltip that hovers after a mouseover.

var msgBrackenRidge = '<b>Eco-Friendly Residence</b><br><br>51 Gawler Crescent, Bracken Ridge.<br><a href=""><img src="thumbnails/gawlercresth.jpg" border="0"></a><br><a href="" onClick="window.open('projectsuper.html','win1','scrollbars=1,width=297,height=390')"><u>Click Here for more info.</u></a>';

Thanks in advance

ForestTech

  • 2 Contributors
  • 2 Replies
  • 130 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ForestTech

Dani AI

Generated

posted a very long HTML string for a tooltip and gave a solid quick fix by splitting the string and escaping embedded quotes. Two additional points worth noting: the original markup contains an invalid nested anchor (an anchor attribute that includes another <a href=...>), and building large HTML strings by hand is fragile and can introduce quoting bugs or XSS risks.

A cleaner, modern option is a multiline template string (ES6) or joining an array of parts. This keeps the markup readable and avoids lots of + or += operations. Example using a template literal (placeholders used instead of the original content):

const html = `
<b>Title</b><br><br>
Address line here.<br>
<a href="DETAILS_URL" rel="nofollow">
  <img src="THUMBNAIL" border="0" alt="Thumbnail">
</a><br>
<a href="MORE_URL" id="more-info"><u>More info</u></a>
`;

An even safer approach is to build the tooltip DOM with createElement and textContent. That avoids manual escaping entirely and keeps listeners separate from markup. Example pattern:

const root = document.createElement('div');
const a = document.createElement('a');
a.href = 'MORE_URL';
a.textContent = 'More info';
a.addEventListener('click', function(e) {
  e.preventDefault();
  window.open('POPUP.html', 'win1', 'scrollbars=1,width=297,height=390');
});
root.appendChild(a);

Troubleshooting tips: fix the nested <a> in the original string (only one anchor per link), prefer addEventListener over inline onclick, use textContent for user-supplied values, and add rel="noopener noreferrer" for external links opened in new windows. See MDN for details on template literals and creating DOM nodes: Template literals and Document.createElement.

Recommended Answers

All 2 Replies

Member Avatar for jalarie

Hopefully, the following will give you an idea of the possibilities. The only major change that I made, other than breaking it into multiple lines for easier editing, was to add backslashes (\) ahead of embedded quotes on line 11.

var msgBrackenRidge = '';
msgBrackenRidge += '<b>Eco-Friendly Residence</b>';
msgBrackenRidge += '<br><br>';
msgBrackenRidge += '51 Gawler Crescent, Bracken Ridge.';
msgBrackenRidge += '<br>';
msgBrackenRidge += '<a href="">';
msgBrackenRidge += '<img src="thumbnails/gawlercresth.jpg" border="0">';
msgBrackenRidge += '</a>';
msgBrackenRidge += '<br>';
msgBrackenRidge += '<a href=""';
msgBrackenRidge += ' onClick="window.open(\'projectsuper.html\',\'win1\',\'scrollbars=1,width=297,height=390\')">';
msgBrackenRidge += '<u>Click Here for more info.</u>';
msgBrackenRidge += '</a>';
Member Avatar for ForestTech

That's fantastic. Thanks a lot!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.