How to Format an HTML Tooltip (Title Attribute)

Is it possible to format an HTML tooltip (title attribute)?

No. But there are other options out there like Overlib, and jQuery that allow you this freedom.

jTip : http://www.codylindley.com/blogstuff/js/jtip/
jQuery Tooltip : https://jqueryui.com/tooltip/

Personally, I would suggest jQuery as the route to take. It's typically very unobtrusive, and requires no additional setup in the markup of your site (with the exception of adding the jquery script tag in your <head>).

How can I use a carriage return in a HTML tooltip?

It’s simple: just press Enter!

<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>

How to format a title attribute with css (setting more width)?

It is currently not possible to format a tooltip. An alternative solution is to use one of the many open source projects that allow for custom HTML based tooltips and then modify their content.

These are some common solutions.

jTip
jQuery Tooltip

Change title attribute of dynamically generated html element for tooltip

getElementsByClassName() (note the plural Elements) returns a list of elements. Loop through that:

var changeTooltip = function(){  var TooltipElements = document.getElementsByClassName("classname");    for ( var i = 0; i < TooltipElements.length; ++i )  {    var TooltipElement = TooltipElements[i];          if (TooltipElement.title == "tooltip text")      TooltipElement.title = "new message";  };};
changeTooltip();

.classname:after {  content: attr(title);  font-style: italic;}

<div title="tooltip text" class="classname" id="identifier">Title: </div><div title="other text" class="classname" id="identifier2">Title: </div>

Simple tooltip - Title Attribute?

The title attribute (@title), should not be used.

Every browser does their own thing with the @title, even though it looks the same.
For people who just use the keyboard, they cannot get the information in @title.
People accessing the site from a mobile device, cannot get the information.
Some, but not all assistive technology can get the information in the @title
1. some allows it to be read after enabling it. Which not many people (users) know about.
2. other technology simply ignores the link text and reads the @title only.

Ex of 4.2:

<a href="#" title="Are you sure?">Delete your account</a>

This will read:

Are you sure? Link

How do I display tooltip text for HTML input element using CSS style and data-title attribute?

I did a bit of Googling myself, and came up with some interesting information. First off, pseduo-selectors :before and :after should be used on container elements.

Potentially you could use <button></button> instead of <input> and achieve the effect you desire:

.inuse[data-title]:hover:after {    opacity: 1;    transition: all 0.1s ease 0.5s;    visibility: visible;}
.inuse[data-title]:after {    content: attr(data-title);    background-color: lightblue;    color: #111;    font-size: 12pt;    font-weight: bold;    position: absolute;    padding: 1px 5px 2px 5px;    bottom: -1.6em;    left: 100%;    white-space: nowrap;    box-shadow: 1px 1px 3px #222222;    opacity: 0;    border: 1px solid #111111;    z-index: 99999;    visibility: hidden;}
.inuse[data-title] {    position: relative;}

<button type="submit" value="Click Me" class="inuse" data-title="Input ELement Help">Click Me</button>