Material Design LiteのツールチップにIDの代わりにclassを使用するには？

Question

data-mdl-forの場合、idの代わりにclassを使用して、JavaScriptで複数のツールチップを使用する必要があります。私のツールチップボタンは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に変換し、ツールチップにはquerySelectorまたはgetElementsByClassNameのようなものを使用しますか？

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

これは間違ったスクリプトですが、これが本当に必要なことを説明することができます。 data-mdl-forを使用する代わりにJavaSriptを使用するツールチップが必要です。または、data-mdl-forをjavascriptで指定し、ボタンクラスを使用してください。

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>