CODEWITHSUNDEEP
htmltooltippage-break
Mark Kramer
Mark Kramer

Reputation: 3214

Inserting HTML inside quotes

I want a page break inside the title attribute of a link, but when I put one in, it appears correct in a browser, but returns 7 errors when I validate it.

This is the code.

<a href="images/Bosses/Lord Yarkan Large.jpg" class="hastipz" target="_blank" title="Lord Yarkan, a level 80 Unique from Silkroad Online -- Click for a Larger Image">
<img class="bosspic" src="images/Bosses/Lord Yarkan.jpg" style="float:right; position:relative;" alt="Lord Yarkon; Silkroad Unique"/>
</a>

The reason is because the title attribute appears in a tooltip, and I need a page break inside that tooltip. How can I add a page break inside the quotes without returning errors?

Upvotes: 1

Views: 2517

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

Do you need to validate for work?

If not, do not worry about the errors if it works as you want it.

Validation is not the goal. It is a tool to help build better Web sites. which is the goal. ;-)

If you must have it validate, you could try to use some script to switch out a specific keyword / set of characters for a <br /> at dom ready. Although this is untested and I am not sure it wouldn't throw errors, too.

EDIT

As requested, a little jQuery to switch out a word:

$('a').each(function(){
    var a = $(this).attr('title');
    var b = a.replace('lineBreak','\n');
    $(this).attr('title', b);
});

Example: http://jsfiddle.net/jasongennaro/qRQaq/1/

Nb:

  1. I used "lineBreak" as the keyword, as this is unlikely to be matched. "br" might be
  2. I replaced it with the \n line break character.
  3. You should try the \n line break character on its own... might work without needing to replace anything.

Upvotes: 1

Gringo Suave
Gringo Suave

Reputation: 31870

I found this forum post:

    There are two approaches:

    1) Use the character entity for a carriage return, which is &#13; Thus:
    <...title="Exemplary&#13;website">

    (For a full list of character entities, try Googling "HTML Character Codes".)

    2) to do any additional styling to your "tooltips", Google "CSS tooltips"

1) is Non-standard though. Works on IE/Chrome, not with Firefox. The new spec appears to recommend &#10; (newline) instead.

Upvotes: 2

Related Questions