Member Avatar for Member #360561

I have tried to insert a linefeed in the "title=" text in an <img> tag.

Both \n and <br /> are shown exactly as written.
Is there a trick to make it actually break the line?

  • 2 Contributors
  • 2 Replies
  • 98 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Member #360561

Dani AI

Generated

The short answer: native title tooltips are not a reliable place for formatted or multi-line text. As observed, browser behavior differs and you end up with inconsistent results. A more robust approach is to render your own tooltip so you control layout, wrapping, and accessibility.

A recommended pattern:

  • Store the tooltip text in a data-* attribute on the element.
  • Create a small tooltip element on hover/focus, set its textContent (not innerHTML) so newlines are preserved, and style it with white-space: pre-wrap so line breaks render.
  • Add role="tooltip" and use aria-describedby (or manage focus events) so keyboard users and assistive tech see the same content.

Minimal implementation sketch

.tooltip {
  position: absolute;
  white-space: pre-wrap;
  background: #222;
  color: #fff;
  padding: 6px;
  border-radius: 4px;
  z-index: 1000;
}
// on pointerenter/focus: create .tooltip, set textContent from element's data-tooltip,
// position it using getBoundingClientRect(), and add role="tooltip" and an id referenced
// by aria-describedby. Remove on pointerleave/blur.

Accessibility and references:

  • Keep any native title text as a fallback only if the content is purely decorative; do not rely on it for essential information.
  • Follow ARIA tooltip guidance for keyboard and screen-reader behavior: MDN: tooltip role and see the HTML attribute reference: MDN: title attribute.
  • For production, consider a small tested library (Popper/Tippy) if you need collision handling and positioning across viewports.

This gives predictable multi-line tooltips across browsers and keeps the UI accessible.

Recommended Answers

All 2 Replies

Member Avatar for sillyboy

From what I have read, there shouldn't actually be new lines in the title attribute. BUT if you do want to try, use "&#13;" which is a carriage return. In firefox, the return is converted to a space, but in IE you will see a line break in the tool tip (which I think is incorrect behaviour).

Hope that helps...

Member Avatar for Member #360561

From what I have read, there shouldn't actually be new lines in the title attribute. BUT if you do want to try, use "
" which is a carriage return. In firefox, the return is converted to a space, but in IE you will see a line break in the tool tip (which I think is incorrect behaviour).

Hope that helps...

Thanks, I tried that, and you're right: In FireFox it's just a space.
There should be a better solution, but I guess I'll just not show any title but open a small message box instead.

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.