Material Design Lite 툴팁에 ID 대신 클래스를 사용하는 방법은 무엇입니까?

Question

data-mdl-for의 경우 id 대신 class을 입력해야 JavaScript에서 여러 툴팁을 사용할 수 있습니다. My Tooltip 버튼이 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> 

잘 작동하지만 위의 여러 단추 요소를 사용해야합니다. 이 id 버튼과 data-mdl-for을 Javascript로 변환하고 작동중인 툴팁에 또는 getElementsByClassName과 같은 것을 사용할 수 있습니까?

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

나는 이것이 잘못된 스크립트라는 것을 알고 있지만 이것이 정말로 필요한 것을 설명 할 수 있습니다. data-mdl-for을 사용하는 대신 JavaSript를 사용하는 툴팁이 필요하거나 자바 스크립트에서 data-mdl-for을 지정하고 버튼 클래스를 사용하십시오.

Answer 1

//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>