L'attribut de titre de création apparaît instantanément sur le vol stationnaire

 // 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" />