材料デザインライトでツールチップを使用するidセレクタの代替

Question

同じページで繰り返しツールチップのリストを使用する予定です。 idセレクタはユニークなので、クラスのような代替セレクタを使用して、ID30と一致するように重複ツールチップを作成するのではなく、ツールチップを複数の要素に適用することをお勧めします。 例：

<p><span class="desc-mdl">MDL</span> is a great tool allowing web 
developers focusing on the code rather than dealing with design. 
<span class="desc-mdl">MDL</span> applies 
<span class="desc-css">CSS</span> and JavaScript to 
<span class="desc-html">HTML</span> elements. But is still provides 
enough freedom for a personal touch for the web page.</p> 

<div class="mdl-tooltip" for="desc-mdl">Material Design Light</div> 
<div class="mdl-tooltip" for="desc-css">Cascading Style Sheets</div> 
<div class="mdl-tooltip" for="desc-html">Hyper Text Markup Language</div> 

私はのためには、IDSのために予約されていることを知っているが、我々は、重複するツールチップの数百を作成避けて使用することができます代替が存在しなければなりません。

Answer 1

各ツールチップには、それぞれdivというタグを付ける必要があります。あなたはidにツールチップについて言及する必要があります（私はidなしでは何も見つかりませんでした）。ここでは、作業コードがある：＃材料設計チームからCodepen

<p><span id="tt mdl 1">MDL</span> is a great tool allowing web developers focusing on the code rather than dealing with design. 
 
    <span id="tt mdl 2">MDL</span> applies 
 
    <span id="tt css">CSS</span> and JavaScript to 
 
    <span id="tt html">HTML</span> elements. But is still provides enough freedom for a personal touch for the web page.</p> 
 

 
<div class="mdl-tooltip" for="tt mdl 1">Material Design Light</div> 
 
<div class="mdl-tooltip" for="tt mdl 2">Material Design Light</div> 
 
<div class="mdl-tooltip" for="tt css">Cascading Style Sheets</div> 
 
<div class="mdl-tooltip" for="tt html">Hyper Text Markup Language</div>