How can I add new line/linebreak character in title attribute in HTML [duplicate]

Question

I am using this

<a href="#" title="select from 1: this 2: that" > Click here </a>

When someone hover over it I see all the text in one line.

Is there any way to show it on new line?

Answer 1

You can use 
 or 
.

<a href="#" title="select from 1: this &#013; 2: that" >Click here</a>

<a href="#" title="select from 1: this &#010; 2: that" >Click here</a>

Answer 2

If you are generating it dynamically put < br/> in html part and \n in non html part

$("td").attr("title", "One \n Two \n Three");
$("td").html("One <br/> Two \n <br/>Three <br/>");
$("td").append("One \n Two \n Three");
$("td").append("<br/>One <br/> Two \n Three");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  <tbody>
</table>

This is using Jquery framework.

Answer 3

As you tagged this with accessibility, I would say the most robust approach is not to rely on the title for information.

The current HTML spec discourages this use as people using who cannot use a mouse (e.g. due to mobility impairment) but use a keyboard and see the screen will never see your tooltip/title text. People using touch screens cannot access it.

Most people using a screen reader will not be aware of the title text either, although it is possible to access in most screen readers it is not read out by default, and someone would have to know to look for it. (And there are more issues.)

The spec suggests using this for line breaks:

If the title attribute's value contains "LF" (U+000A) characters, the content is split into multiple lines. Each "LF" (U+000A) character represents a line break.

However, the display of the new lines is dependant on the browser (How can I use a carriage return in a HTML tooltip).

I suspect that the overall UI approach needs a little more thought, as many people would be confused by the sort of instruction in your example, i.e. what does clicking on it achieve if there are multiple options?

If your situation makes it difficult to write good link text then I would post up more about the interaction at the UX stackexchange.

Answer 4

<a href="#" title="select from 
1: this 
2: that" >Click here</a>