Mario Mario - 16 days ago 5
HTML Question

Changing content of a HTML element's 'title' attribute used for tooltip, using jquery or css

I have the following html element:

<a href="#" id="pinterest" alt="PINTEREST">
<img alt="PINTEREST" title="PINTEREST" src="image.png" class="icon">
</a>


I need to change the
title
attribute value from 'pinterest' to 'contact us', which is used as a tooltip when one hovers over the above img.

I've done some searching and I believe it cannot be done with CSS (except possibly with
:before
or
:after
pseudo-element?), so I'm now trying in jQuery.

My jQuery looks like this:

jQuery(document).ready(function($) {
$('#pinterest img').attr( 'title', 'Contact Us' );
)};


But it's not working.

I notice my jQuery version is 1.11.3, if it's relevant (I learnt about
prop
for later versions)

Thank you.

Answer

There is problem in you jQuery(document).ready function as you added curly after closing parenthesis

e.g.

document.ready function ends with )}; while should be ended with });

Just replace:

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
)};

should be replaced with

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
});

jQuery(document).ready(function($) {
  $('#pinterest img').attr( 'title', 'Contact Us' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" id="pinterest" alt="PINTEREST">
  <img alt="PINTEREST" title="PINTEREST" src="image.png" class="icon">
</a>

Note: there is nothing to do with the JQuery library version :)