在 Material Design lite 中使用工具提示替代 id 选择器答案

【问题标题】：Alternative to id selectors using tooltip in material design lite在 Material Design lite 中使用工具提示替代 id 选择器
【发布时间】：2016-03-23 06:53:50
【问题描述】：

我计划在同一页面上重复使用工具提示列表。由于 id 选择器是唯一的，我更喜欢使用替代选择器（如类）在 multiple 元素上应用 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 是为 id 保留的，但我们必须有一个替代方案，我们可以使用它来避免创建数百个重复的工具提示。

【问题讨论】：

标签： html tooltip material-design-lite

【解决方案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>

【讨论】：

我没有对你投反对票，但这不是我想要的。我很清楚这种方法。但这会带来很多不必要的标签，我尽量避免。