Make title attribute appear instantly on hover

Question

is there a possibility to make a title attribute of an anchor tag appear instantly on mouseover not just after seconds. Any solution in JavaScript/jQuery and CSS is good.

Answer 1

The handling of the title attribute is browser-dependent, and no APIs have been defined to control it, still less specified in specs. This includes the delay, the duration of the display, the font used, font size, etc.

There are other techniques that can be used instead of the title attribute. Some of them have been mentioned in other answers. Note that simple “CSS tooltips” can be implemented in pure CSS rather simply and flexibly. When using these techniques, the data to be shown is usually not in a title attribute, since its handling is browser-dependent, so there would be a risk of having your special tooltip display and a browser’s implementation of title. Though it is possible to prevent the latter, when scripting is enabled, it is simpler to use an attribute that has no default effect on anything, such as data-title=... or data-tooltip=....

Answer 2

One approach:

// textFrom : String, the attribute from which the text
//            should come,
// delta :    String or Number, the distance from the cursor at
//            which the tooltip should appear
function instantTooltips(textFrom, delta) {
  // if delta exists, and can be parsed to a number, we use it,
  // otherwise we use the default of 5:
  delta = parseFloat(delta) ? parseFloat(delta) : 5;

  // function to handle repositioning of the created tooltip:
  function reposition(e) {
    // get the tooltip element:
    var tooltip = this.nextSibling;
    // setting the position according to the position of the
    // pointer:
    tooltip.style.top = (e.pageY + delta) + 'px';
    tooltip.style.left = (e.pageX + delta) + 'px';
  }

  // get all elements that have an attribute from which we
  // want to get the tooltip text from:
  var toTitle = document.querySelectorAll('[' + textFrom + ']'),
    //create a span element:
    span = document.createElement('span'),
    // find if we should use textContent or innerText (IE):
    textProp = 'textContent' in document ? 'textContent' : 'innerText',
    // caching variables for use in the upcoming forEach:
    parent, spanClone;
  // adding a class-name (for CSS styling):
  span.classList.add('createdTooltip');
  // iterating over each of the elements with a title attribute:
  [].forEach.call(toTitle, function(elem) {
    // reference to the element's parentNode:
    parent = elem.parentNode;
    // cloning the span, to avoid creating multiple elements:
    spanClone = span.cloneNode();
    // setting the text of the cloned span to the text
    // of the attribute from which the text should be taken:
    spanClone[textProp] = elem.getAttribute(textFrom);

    // inserting the created/cloned span into the
    // document, after the element:
    parent.insertBefore(spanClone, elem.nextSibling);

    // binding the reposition function to the mousemove
    // event:
    elem.addEventListener('mousemove', reposition);

    // we're setting textFrom attribute to an empty string
    // so that the CSS will still apply, but which
    // shouldl still not be shown by the browser:
    elem.setAttribute(textFrom, '');
  });
}

// calling the function:
instantTooltips('title', 15);

[title] {
  display: block;
  margin: 0 0 1em 0;
}

/*
  hiding, and styling, the elements we'll be creating
*/
[title] + span.createdTooltip {
  display: none;
  border: 2px solid #f90;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.2em 0.5em;
  border-radius: 0.75em;
}

/*
  showing the created elements on hovering the element we want to
  show tooltips for
*/
[title]:hover + span.createdTooltip {
  display: block;
  position: absolute;
}

<span title="This is the span's title">A span element</span>
<img src="http://placekitten.com/g/250/250" title="A kitten." />
<input title="This is an input element's title." value="This input has a title" />

References:

• Conditional ('ternary') operator.
• document.createElement().
• document.querySelectorAll().
• Element.classList.
• in operator.
• Node.cloneNode().
• Node.nextSibling.
• Node.parentNode.
• parseFloat().
• typeof.