CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user10249871
user10249871

Reputation:

Change font-family of title attribute

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

Upvotes: 7

Views: 3020

Answers (1)

wscourge
wscourge

Reputation: 11301

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

Upvotes: 2

Related Questions