Modify value of attribute

Question

How to modify the value of data-tooltip? I would like to do that with one line of code.

Here is the element:

<li class="ui-btn-icon-left " data-icon="cf">
  <a href="#" class="ui-btn ui-icon-cf">
    <span class="tooltip" data-tooltip="NeverGiveUp">Samaras</span>
  </a>
</li>

Here are two of my attempts:

$($(li).find('a').find('span').attr('data-tooltip')).val('foo');
$($(li).find('a').find('span').attr('data-tooltip')).text('foo');

which had no impact.

Answer 1

Well the straight forward answer is .attr('data-tooltip', 'new value');. However, it is also possible, and more recommended (see hjpotter92's comment), to use .data('tooltip', 'new value');

Answer 2

I assume you want to do the following:

$('li a').find('span').data('tooltip', 'foo');

Answer 3

Use .data():

$($(li).find('a').find('span').data('tooltip', 'foo'));

Answer 4

I think you can simplify that to:

$("li a span").data("tooltip", "foo");

Answer 5

The shortest notation would be:

$('li a span').data('tooltip', 'foo');

Answer 6

For HTML 5 data-attributes, you can use data()

$($(li).find('a').find('span').data('tooltip', 'foo'));

Answer 7

Use simple with data-attribute

$('.tooltip[data-tooltip]').data('tooltip', 'foo');