Question

我打算在同一页面上重复使用工具提示列表。由于id选择器是唯一的，我更喜欢使用类似于类的替代选择器在多个元素上应用一个工具提示，而不是创建重复的工具提示，因此我可以匹配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 for保留给id，但我们可以使用另一种方法来避免创建数百个重复的工具提示。

Answer 1

对于每个工具提示，您必须提供每个div标记。您应该id提及工具提示（没有id我没有找到任何办法）。以下是您的工作代码：Codepen

＆＃13;

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

＆＃13;

在材料设计精简版中使用工具提示替代id选择器

1 个答案: