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追加していますが、DOM から div を削除するのではなく、単に非表示にしています。そのため、多くのツールチップ div (すべて同じ) が作成され、それが機能しない理由です。bodymouseovermouseoutidhide

また、 にタイプミスが$('<div class="tooltip" id="popup">Cardnumber<div>')あります$('<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

mouseenter,mouseleaveの代わりにmouseoverとを使用しmouseoutます。

mouseover.content-cardnumber要素内にカーソルを移動すると、イベント ハンドラーが呼び出されます。それは多くのを作成しますdiv。

于 2013-07-07T08:09:51.967 に答える
0

ID「ポップアップ」で複数のツールチップを作成していますか? 生成されたソースを確認してください。

于 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 に答える