Question

如果我在<li>中使用文字，则工具提示不会显示，但如果我使用<img>，则同样的工作原理如下： Fiddle

HTML代码如下：

<li class='tooltip'>
    Your text goes here
    <ul class="tooltipText">
        <li class='info'>Some text to fill the box with.</li>
    </ul>
</li>

如何实现这一目标？

Answer 1

您需要使用另一个具有类tooltipText

的div来包装info div

代码：

 <div class="tooltipText">
    <div class='info'>
       Some text to fill the box with.
    </div>
</div>

小提琴：http://jsfiddle.net/66nLy/19/

更改了js功能行：

 elem.querySelector('img').addEventListener('click', click);

到

 elem.querySelector('span').addEventListener('click', click);

Answer 2

首先犯的错误是提供的jsfiddle中的JavaScript执行时刻。工作小提琴使用no wrap - in <head>，非工作小提琴使用onLoad。当你在加载时绑定事件处理程序时，这个事件将在JavaScript运行时执行，因此不能绑定任何处理程序。

其次你有错误的选择器（仍然是img，尽管没有这样的标签。为了简化我将文本放在span并选择此范围作为选择器，请看这个工作小提琴：{{3} }

HTML

<li class='tooltip'>
    <span>Your text goes here</span>
    <ul class="tooltipText">
        <li class='info'>Some text to fill the box with.</li>
    </ul>
</li>

的JavaScript

elem.querySelector('span').addEventListener('click', click);

如何使<li>？</li>中包含的文本可用

2 个答案: