0

I have a dynamically generated HTML element that includes a title attribute which appears in a tooltip when hovering, like:

<div title="tooltip text" class="classname" id="identifier"></div>

I would like to change the contents of the title attribute using javascript code set to run as part of the HTML render. Currently, my code is as follows:

var changeTooltip = function(){
     var TooltipElement = document.getElementsByClassName("classname");
     if (TooltipElement.title = "tooltip text"){
         TooltipElement.title = "new message";
     };
};

window.onload = changeTooltip();

This code leaves the original string in the div's title attribute once the page renders fully. Can anyone explain why, and possibly show the correct way? Note that I must use JS, I cannot use JQuery.

Improve this question

2 Answers 2

Reset to default
2

getElementsByClassName() (note the plural Elements) returns a list of elements. Loop through that:

var changeTooltip = function(){
  var TooltipElements = document.getElementsByClassName("classname");
  
  for ( var i = 0; i < TooltipElements.length; ++i )
  {
    var TooltipElement = TooltipElements[i];
      
    if (TooltipElement.title == "tooltip text")
      TooltipElement.title = "new message";
  };
};

changeTooltip();
.classname:after {
  content: attr(title);
  font-style: italic;
}
<div title="tooltip text" class="classname" id="identifier">Title: </div>
<div title="other text" class="classname" id="identifier2">Title: </div>

Finally, you need to change:

window.onload = changeTooltip();

to 

window.onload = changeTooltip;

so that the function doesn't run until everything is loaded.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

This doesn't throw any errors, but still does not achieve the desired result for me. The original title attribute remains.
Then we'd need to see the actual HTML and javascript, names and all, involved. As you can see, it works fine in the example here. Are there any errors in the JavaScript console?
What happens when you fix the onload assignment, per my edited answer?
I really can't provide that since I'm trying to customize a piece of software for my company. When I try running the following code, I get the expected result in the dialog box that appears, but it doesn't hold once the page fully loads: var changePersonalTooltip = function(){ var personalElement = document.getElementsByClassName("iwov-icon iwov-img-personaldisable"); if (personalElement.title = "Show personalization results"){ personalElement.title = "test"; alert(personalElement.title); alert("Function ended."); }else{ alert("Function failed."); }; };
Note that the code you pasted still has the "trying to give a title to a list of elements" bug. Still wondering what happens when you repair the onload assignment.
|
0

The reason is that as the function name suggests, getElementsByClassName returns a list of elementS, not a single element. If you know the specific element (the div element) you want to modify is the first / only element that will match the criteria, you can access it with [0]. Try:

var TooltipElement = document.getElementsByClassName("classname")[0];

Also, since your div has an ID, you'd actually be better off with:

var TooltipElement = document.getElementById("identifier");

Always prefer using an ID when you're targeting a single, specific element. It's is much more concise, accurate and performs better.

See working example: 

var TooltipElement = document.getElementById("identifier");
TooltipElement.title = "new title";
<div title="tooltip text" class="classname" id="identifier">Some text</div>

Improve this answer

4 Comments

I understand your logic, but making this change returns "Unable to set property 'title' of undefined or null reference". Also, I get the same message when I attempt to use getElementById.
@Phil That doesn't sound right. I've added a snippet to show how that works.
That's exactly what I have and still once the page loads fully, the original title attribute remains, plus I'm getting the same error as before.
Then you should post a MCVE (read How to Ask). You should be able to see it does work in the snippet in my answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.