Question

我在我的网站上使用PHP，MySQL，jQuery，Smarty等。

我想在我的一个网页上实现工具提示功能。为此，我开发了一些示例jQuery代码作为概念证明。

然而，当我尝试在我的网站中实现相同的功能时，我遇到了一些问题。在我的网页上，我使用<table>，我想在其中使用jQuery功能。

有人可以帮助我吗？

在小提琴中，我在图片的click上显示了工具提示菜单，但在我的网站中，我想在文本上显示工具提示，例如＆＃34; 报告问题 - QUE37261 ＆＃34;和其他类似的标题。

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

我认为最简单的解决方案是使用jQuery UI - Tooltip。

使用此功能，您只需将属性title附加到要显示工具提示的元素即可。

例如，从您的示例中获取一些代码：

  <li>Question 1.</li>
  <li class="center-align" title="my tooltip message text">**Report question issue - QUE37261**</li>

然后，在head标签的某处：

  <script>
    $(function() {
      $( document ).tooltip();
    });
  </script>

在这种情况下，<li>元素会引发工具提示，如果只想要其中的文本，则可以这样做：

 <li>Question 1.</li>
 <li class="center-align">**Report <span title="my tooltip message text">question</span> issue - QUE37261**</li>

在这种情况下，只有单词文本“问题”会提高工具提示。

您甚至可以complex tooltip content。

或者，如果您将某个title属性用于其他目的，则可以仅为您定义的某些类定位工具提示（应在这些元素中定义title属性）。例如：

$(".my_tooltip_class_element").tooltip();

Answer 2

您可以添加标题属性以显示工具提示。

Answer 3

如果你正在使用JQuery，你可以添加一个悬停事件：

$(document).ready(function() {
$('.question li').hover(function() {
     clearTimeout($(this).data('timeout'));
    //toolify()
}, function() {
    var t = setTimeout(function() {
        //removetooltip.
    }, 500);
    $(this).data('timeout', t);
});
});

如何将div元素中的工具提示添加到表格中的li元素？

3 个答案: