Question

以下是参考小提琴： http://jsfiddle.net/66nLy/12/ 就像这个小提琴一样，我想在使用<li>而不是<div>的网页中实现相同的功能。 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>

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

Answer 1

以下是你想要的伙伴：http://jsfiddle.net/webcarvers/66nLy/17/

HTML：

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

的CSS：

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

JS：

"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);

Answer 2

你可以试试这个： - HTML更改

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

脚本更改 text = elem.querySelector（'li.info'）;

CSS更改 div.tooltip＆gt; li.info { 显示：无; }

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>而不是<div>来使工具提示代码可用？</div> </li>

2 个答案: