Javascript 如何使用<；李>；而不是<；部门>；使工具提示代码可行？

以下是一个参考小提琴： 就像这把小提琴一样，我想在使用

而不是

的网页中实现相同的功能。 HTML代码如下所示：

<table class="base-table selection-table" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:15px;">
        <tr class="evenRow" id="37261">
            <td class="question">
                <ul class="tabl-head">
                    <li>Question 1.</li>
                    <li class="center-align">**Report question issue - QUE37261**</li>
                    <li class="right-align"><a class="change_ps_question" href="change_practice_sheet_question.php?question_id=37261&practice_sheet_id=3"><label class="bright" style="cursor:pointer;" >Change Question</label></a>
                    </li>
                </ul>
                <ul class="options w-auto">
                    <li><strong>Question:</strong>
    Pair of contrasting characters controlling the same trait is called:</li>
                    <li><strong>Answer:</strong>

                        <p><b style="font-size:13px;">1.</b>&nbsp;&nbsp; Factors
                            <br />
                        </p>
                        <p><b style="font-size:13px;">2.</b>&nbsp;&nbsp; alleles
                            <br />
                        </p>
                        <p><b style="font-size:13px;">3.</b>&nbsp;&nbsp; alloloci
                            <br />
                        </p>
                        <p><b style="font-size:13px;">4.</b>&nbsp;&nbsp; paramorphs
                            <br />
                        </p>
                    </li>
                    <li><strong>Correct Answer Option : 2</strong>
                    </li>
                </ul>
            </td>
        </tr>
    </table>

问题1
**报告问题问题-QU37261**




问题：
控制同一特征的一对对比字符称为：
回答：
一,。因素



二,。等位基因



三,。异基因座



四,。准晶




正确答案选项：2

实际表太大，包含许多记录。为了简洁起见，我只显示了一条记录。

您可以尝试以下方法：- HTML更改

<ul>
    <li class='info'>
        Some text to fill the box with........
    </li>
</ul>

---

这是你想要的，伙计：

HTML:

JS:

“严格使用”；
功能点击（事件）{
var elem=this.parentNode.querySelector（'.info_container'）；
if（elem）
elem.style.display=elem.style.display=='block'？'none'：'block'；
}
函数toolify（）{
var idx，
伦恩，
埃伦，
信息，
文本，
elements=document.querySelectorAll（'li.tooltip'），
帆布，
伊姆古尔，
指针，
tipHeight=20，
tipWidth=20，
宽度=200，
高度=100，
ctx；
//创建将在其中绘制三角形的画布元素
canvas=document.createElement（'canvas'）；
canvas.width=tipHeight；
canvas.height=tipWidth；
ctx=canvas.getContext（'2d'）；
ctx.strokeStyle='#000'；//边框颜色
ctx.fillStyle='#fff'；//背景色
ctx.lineWidth=1；
ctx.translate（-0.5，-0.5）；//移动半个像素以生成尖锐的线条
ctx.beginPath（）；
ctx.moveTo（1，canvas.height）；//左下角
ctx.lineTo（canvas.width，1）；//右上角
ctx.lineTo（canvas.width，canvas.height）；//右下角
ctx.fill（）；//填充背景
ctx.stroke（）；//用边框划过它
//固定最下面一行
ctx.fillRect（0，canvas.height-0.5，canvas.width-1，canvas.height+2）；
//创建一个div元素，其中三角形将设置为背景
指针=document.createElement（'li'）；
pointer.style.width=canvas.width+'px'；
pointer.style.height=canvas.height+'px'；
pointer.innerHTML=“”//不间断空格
pointer.style.backgroundImage='url（'+canvas.toDataURL（）+'）；
pointer.style.position='absolute'；
pointer.style.top='2px'；
pointer.style.right='1px'；
pointer.style.zIndex='1'；//将其放置在其他元素上
console.log（elements.length）；
for（idx=0，len=elements.length；idx

您的问题是什么？@Onheiron:无法在我的网站中实现相同的工具提示功能，我使用的是

而不是。使用标签，功能正常。使用

更新您的小提琴，并描述哪些功能不正常，我们可以查看一下此功能在
中正常工作。。。您是否在每个资源中使用
li.tooltip
更改了所有
div.tooltip
。像这样，有很多这样的
存在，所以我需要使用jQuery选择器来管理它。我应该如何做到这一点，而不是点击图像？你为我做的工作。谢谢你。但仍然存在一个问题。我想在点击
而不是图像中包含的文本时调用javascript。您可以使用任何文本代替图像。
div.tooltip li.info
{
text-align:left;
position:absolute;
left:1px;
right:1px;
top:20px;
bottom:1px;
color:#000;
padding:5px;
overflow:auto;
border:1px solid #000;
}

<li class='tooltip'>
    <img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help' />
    <ul class="tooltipText">
        <li class='info'>Some text to fill the box with.</li>
    </ul>
</li>

li{
   display:block;
}
li.tooltip
{
  position:relative;
  display:inline-block;
  cursor:pointer;
  width:300px;
  text-align:right;
}
li.tooltip > ul li.info
{
  display:none;
}
li.tooltip > ul li.info_container
{
  position:absolute;
  right:20px;
  width:200px;
  height:100px;
  display:none;
    color:#000;
}
li.tooltip ul li.info
{
  text-align:left;
  position:absolute;
  left:1px;
  right:1px;
  top:20px;
  bottom:1px;
  color:#000;
  padding:5px;
  overflow:auto;
  border:1px solid #000;
}

"use strict";

function click(event) {
    var elem = this.parentNode.querySelector('.info_container');
    if (elem) 
        elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}

function toolify() {
    var idx,
    len,
    elem,
    info,
    text,
    elements = document.querySelectorAll('li.tooltip'),
        canvas,
        imgurl,
        pointer,
        tipHeight = 20,
        tipWidth = 20,
        width = 200,
        height = 100,
        ctx;

    // Create a canvas element where the triangle will be drawn
    canvas = document.createElement('canvas');
    canvas.width = tipHeight;
    canvas.height = tipWidth;
    ctx = canvas.getContext('2d');

    ctx.strokeStyle = '#000'; // Border color
    ctx.fillStyle = '#fff'; // background color
    ctx.lineWidth = 1;

    ctx.translate(-0.5, -0.5); // Move half pixel to make sharp lines
    ctx.beginPath();
    ctx.moveTo(1, canvas.height); // lower left corner
    ctx.lineTo(canvas.width, 1); // upper right corner
    ctx.lineTo(canvas.width, canvas.height); // lower right corner
    ctx.fill(); // fill the background
    ctx.stroke(); // stroke it with border
    //fix bottom row
    ctx.fillRect(0, canvas.height - 0.5, canvas.width - 1, canvas.height + 2);

    // Create a div element where the triangel will be set as background
    pointer = document.createElement('li');
    pointer.style.width = canvas.width + 'px';
    pointer.style.height = canvas.height + 'px';
    pointer.innerHTML = '&nbsp;' // non breaking space
    pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
    pointer.style.position = 'absolute';
    pointer.style.top = '2px';
    pointer.style.right = '1px';
    pointer.style.zIndex = '1'; // place it over the other elements

    console.log(elements.length);
    for (idx = 0, len = elements.length; idx < len; ++idx) {
        elem = elements[idx];
        elem.querySelector('img').addEventListener('click', click);
        text = elem.querySelector('ul li.info');
        // Create a new div element, and place the text and pointer in it
        info = document.createElement('li');
        text.parentNode.replaceChild(info, text);
        info.className = 'info_container';
        info.appendChild(pointer.cloneNode());
        info.appendChild(text);
        text.style.display = 'block';
        //info.addEventListener('click',click);
    }
}
window.addEventListener('load', toolify);