html - 在 Material Design Lite 中使用工具提示替代 ID 选择器

Question

我计划在同一页面上重复使用工具提示列表。由于 id 选择器是唯一的，我更愿意使用替代选择器(如类)在 多个 元素上应用 one 工具提示，而不是创建重复的工具提示以便我可以匹配ID。示例:

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

我知道 for 是为 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>