0

我有一个表格，当我将鼠标悬停在表格的特定列上时，我得到了工具提示。但是，当我将鼠标指针移动到另一个区域时，即使我编写了隐藏工具提示的代码，工具提示仍然存在。下面是代码。我究竟做错了什么？我不使用任何插件。计划使用但想在使用插件之前尝试一次。

<script>
            $(function () {
                $(".content-cardnumber").mouseover(function (event) {
                    createToolTip(event);
                }).mouseout(function () {
                    $("#popup").hide();
                });
            });
            function createToolTip(event){
                $('<div class="tooltip" id="popup">Cardnumber<div>').appendTo('body');
                var tPosX = event.pageX - 10;
                var tPosY = event.pageY - 10;
                $('div.tooltip').css({ 'position': 'absolute', 'top': tPosY, 'left': tPosX });
            }
        </script>

这就是 html 的样子。

<tr>
                    <th class="content-cardnumber">Card Number</th>
                    <th class="content-eventcode">Event Code</th>
                    <th class="content-origintime">Event Time</th>            
                </tr>

                @foreach (IEvent e in Model.EventList)
                {
                    <tr class="events-row">
                        <td title="Test" class="content-cardnumber">@e.CardNumber</td>
                        <td class="content-eventcode">@e.EventCode</td>
                        <td class="content-origintime">@e.EventOriginTime</td>

                    </tr>
                }
4

4 回答 4

1

您的createToolTip函数正在创建一个新函数div并将其附加到body每个mouseover事件上，但是mouseout您并没有从 DOM 中删除div 而是简单地隐藏它。所以你最终得到了许多工具提示 div（都具有相同的id），这就是为什么你hide不起作用的原因。

另外，您在$('<div class="tooltip" id="popup">Cardnumber<div>'), should be中有错字$('<div class="tooltip" id="popup">Cardnumber</div>')。

尝试：

$(function () {
                $(".content-cardnumber").mouseover(function (event) {
                    showToolTip(event);
                }).mouseout(function () {
                    $("#popup").hide();
                });
            });
            function showToolTip(event){
                if ($('#popup').length == 0)
                     $('<div class="tooltip" id="popup">Cardnumber</div>').appendTo('body');
                var tPosX = event.pageX - 10;
                var tPosY = event.pageY - 10;
                $('div.tooltip').css({ 'position': 'absolute', 'top': tPosY, 'left': tPosX }).show();
            }
于 2013-07-07T08:14:57.997 回答
0

使用mouseenterandmouseleave代替mouseover, mouseout。

mouseover如果您在.content-cardnumber元素内移动光标，则会调用事件处理程序。这将创建许多divs。

于 2013-07-07T08:09:51.967 回答
0

您是否创建了多个 ID 为“popup”的工具提示？检查您生成的源代码，因为这会破坏它（我认为）

于 2013-07-07T08:10:50.437 回答
0

问题是：当您准备好文档时，div 弹出窗口不存在 

 <script>
        $(function () {
            $(".content-cardnumber").mouseenter(function (event) {
                createToolTip(event);
            }).mouseleave(function () {
               hideTooltip();///try this
            });
        });
        function createToolTip(event){
            $('<div class="tooltip" id="popup">Cardnumber<div>').appendTo('body');
            var tPosX = event.pageX - 10;
            var tPosY = event.pageY - 10;
            $('div.tooltip').css({ 'position': 'absolute', 'top': tPosY, 'left': tPosX });
        }

 function hideTooltip(){
  $("#popup").remove();
 }
</script>
于 2013-07-07T08:11:28.560 回答