0

For example :

<input type="text" title="Here is my title"  value="smth"/>

if you just mouseover (without clicking) for 2 second, the title will show up. But how to force the title to show up even if user clicks (doesnt wait for 2 seconds) in text field?

NOTES:

1) I am interested in pure approach, without libraries.

2) I am not interested in adding extra <html> elements, because there is solution for that.

T.Todua
  • 53,146
  • 19
  • 236
  • 237

1 Answers1

2

Without library:

input[type=text] + span {
  display: none;
}
input[type=text]:focus + span {
  display: inline;
}
<input type="text" title="Here is my title"  value="smth"/> <span>Here is my title</span>

Using script to get the title

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

window.addEventListener("load",() => {
  document.querySelectorAll("input[type=text]").forEach(inp => {
    let span = document.createElement('span');
    span.innerHTML = inp.getAttribute("title");
    insertAfter(span, inp);
  })
})  
input[type=text] + span {
  display: none;
}
input[type=text]:focus + span {
  display: inline;
}
<input type="text" title="Here is my title 1"  value="smth"/><br/>
<input type="text" title="Here is my title 2"  value="smth"/><br/>
<input type="text" title="Here is my title 3"  value="smth"/><br/>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Make since to have like this, +1! – ROOT Mar 03 '20 at 08:56
  • well, thanks for answer, just i didnt wanted to add extra html elements... however, upvoted answer.... (is not there any JS/prototype script that might change browser property/behavior with regard to titles? at least, cuted down 2 second to 0.2 sec) – T.Todua Mar 03 '20 at 09:03
  • @T.Todua My second version does not need extra HTML in the markup. It generates the span from the input. There is no way to change the built-in delay in title showing – mplungjan Mar 03 '20 at 09:04