Change font-family of title attribute

Question

I want to change font-family of the title attribute on my input field using JavaScript Or jQuery. Is there a way of doing this?

<input type="text" title="Enter Your Name" id="txtName" />

Answer 1

The original title attribute styles (on <a> , <img> or <input> ) are defined by the operating system you use - same like, for example, <select> .

What's possible is to replace default tooltips with in-flight created HTML, using CSS and JS.

For that, you can use some open sourced libraries, like for example Bootstrap tooltips :

 $('input').tooltip() 

 .tooltip { font-family: 'Unlock', cursive!important; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Unlock" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <input type="text" data-toggle="tooltip" title="Enter Your Name" id="txtName" />