Rockstar Rockstar - 1 month ago 5
HTML Question

Pass a function to a tooltip

I am printing tags that are related to a post and the result looks like the following:



function getTag(){

return "browse posts related to" + this.innerHTML;

}

span, a{
background: red;
color: #fff;
margin: 3px;
padding: 1px;
text-decoration: none;
}

Tags: <span title= 'getTag()'>
<a href="#"> food </a>
</span>

<span title= 'getTag()'>
<a href="#"> recipe </a>
</span>

<span title= 'getTag()'>
<a href="#"> drink </a>
</span>





I have tried passing the function
getTag()
to the attribute
title
but is not working correctly.

How do I use JavaScript to get the text content of each
span
element and pass the text content to the
title
attribute of each
span
element.

I will like using JavaScript to achieve this.

Ole Ole
Answer

Without using any libraries, you need to work with the DOM. Place your script element at the bottom of the page.

<script>
var spans = document.querySelectorAll('span');

for (var i = 0; i < spans.length; i++) {
  spans[i].title = 'browse posts related to ' + spans[i].innerHTML;
}
</script>

The script is easy to understand. You tell your browser to fetch all your span elements and store them inside the variable called spans. In the next step you can loop trough each of this spans and manipulate their attributes.