CODEWITHSUNDEEP
javascriptjquerymaterial-design-lite
shmshd17
shmshd17

Reputation: 59

How to use class instead of ID for Material Design Lite tooltip?

I need to take class instead of id for data-mdl-for to use multiple tooltips in JavaScript. My Tooltip buttons will be generated by JSON.

<button id="tooltip" class="mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons lighticon">content_copy</i>
        <div class="mdl-tooltip mdl-tooltip--left" data-mdl-for="tooltip">
          Copy
        </div>
</button>

This works fine but I need to use multiple above button elements. Is there a possible way to convert this id of button and data-mdl-for to Javascript and use something like querySelector or getElementsByClassName for a working Tooltip?

var a = document.querySelector('.mdl-button');
a.data-mdl-for = "tooltip"

I know this is a wrong script but this can explain what I really need. I need a working tooltip with JavaSript instead of using data-mdl-for or specify the data-mdl-for in javascript and use button class.

Upvotes: 2

Views: 886

Answers (1)

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

//Get list
var mdlButtons = document.querySelectorAll(".mdl-button");
//Iterate over list
for (var i = 0; i < mdlButtons.length; i++) {
  //find child tooptip
  var child = mdlButtons[i].querySelector(".mdl-tooltip");
  if (child === null) {
    continue;
  }
  //Modify list
  child.setAttribute("data-mdl-for", mdlButtons[i].getAttribute("id"));
  console.log(child);
}
//Show a list of ".mdl-button" where we can see it has been modified
console.log(
  document.querySelectorAll(".mdl-button")
);
<button id="tooltip-1" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons lighticon">content_copy</i>
  <div class="mdl-tooltip mdl-tooltip--left">
    Copy
  </div>
</button>
<button id="tooltip-2" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons lighticon">content_copy</i>
  <div class="mdl-tooltip mdl-tooltip--left">
    Copy
  </div>
</button>
<button id="tooltip-3" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons lighticon">content_copy</i>
  <div class="mdl-tooltip mdl-tooltip--left">
    Copy
  </div>
</button>

Upvotes: 2

Related Questions