当我将鼠标悬停在表格的行上时,将显示图像,而当将鼠标悬停在图像上时,将显示工具提示。 当我将鼠标悬停在工具提示中的选项(即test1,test2)上时,鼠标光标所在的选项应突出显示或更改其背景颜色,以使用户知道他们将要单击工具提示中的哪个选项。 请找到小提琴http://jsfiddle.net/0w9yo8x6/65/

以下是示例javascript代码:

$(function() { 
    var rowData;
    $(document).tooltip({
        items: "img, [data-title]",
        content: function () {
            var element = $(this);
            if (element.is("img"))
             {
                 rowdata = element.attr("data-title");
                 $(document).off('click', '#test');
                 $(document).on('click', '#test', function() {
                     test();
                 });


             }

            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(

            function () {
                $(this).stop(true).fadeTo(1000, 1);
            },

            function () {
                $(this).stop(true).fadeOut(200, function () {
                    $(this).remove();
                })
            });
        },
        position: {
            my: "left",
            at: "right"
        }
    });
});



$(function () {
  $('.one').attr('title', $('.myTooltipTable').remove().html());
  $(document).tooltip();
});

#1楼 票数:1 已采纳

我认为这就是您要寻找的: http : //jsfiddle.net/0w9yo8x6/66/

您必须注意何时使用ID和何时使用类。

.toolTipHover:hover {
    background-color:lightgray;
}

<table class="myTooltipTable" style="position:absolute;">
    <tr><td> <span id="test" class="toolTipHover">test1</span></td></tr>
     <tr><td> <span id="test" class="toolTipHover">test2</span></td></tr>
 </table>

在上面的html中,您将看到id =“ test”有两种不同的方式吗? 它们中只有一个应该注册(第一个),因为在DOM上,ID必须是唯一的。 所以我实现了一个类toolTipHover并将CSS应用于该类。

我没有触及任何其他代码,但是我建议您回顾一下您的代码,以确保ID是唯一的,并且如果您希望将相同的函数应用于多个元素,则最好添加一个类。

#2楼 票数:1

您无需编辑HTML并添加其他类。 您可以通过添加简单的CSS悬停效果来实现此目的:

您只需要添加以下代码:

.ui-tooltip-content span:hover {
    background-color:Orange;
    transition:all 0.4s ease-in-out;
}

请参阅下面的完整代码:

 $(function() { var rowData; $(document).tooltip({ items: "img, [data-title]", content: function () { var element = $(this); if (element.is("img")) { rowdata = element.attr("data-title"); $(document).off('click', '#test'); $(document).on('click', '#test', function() { test(); }); } return $(this).prop('title'); }, show: null, close: function (event, ui) { ui.tooltip.hover( function () { $(this).stop(true).fadeTo(1000, 1); }, function () { $(this).stop(true).fadeOut(200, function () { $(this).remove(); }) }); }, position: { my: "left", at: "right" } }); }); $(function () { $('.one').attr('title', $('.myTooltipTable').remove().html()); $(document).tooltip(); }); 
 td.myData > img { display: none; float:right; height: 19px; } td.myData:hover > img { display: inline-block; } .ui-tooltip-content span { transition:all 0.4s ease-in-out; } .ui-tooltip-content span:hover { background-color:Orange; transition:all 0.4s ease-in-out; } 
 <script> function test(){ alert("test invoked"); } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <table class="myTooltipTable" style="position:absolute;"> <tr><td> <span id="test" >test1</span></td></tr> <tr><td> <span id="test" >test2</span></td></tr> </table> <br/><br><br> <table border="1"> <tr> <td class="myData">Data1 <img class="one" id="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> </td> </tr> <tr> <td class="myData">Data2 <img class="one" id="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> </td> </tr> <tr> <td class="myData">Data3 <img class="one" id="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" /> <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;"/> </td> </tr> </table> 

  ask by user222 translate from so

未解决问题?本站智能推荐:

1回复

如何更改 3 个不同工具提示箭头的颜色

我通过像这样的数据切换使 3 个工具提示与 js 具有不同的颜色 在这个原型中工作正常,箭头与工具提示背景jsfiddle 原型的颜色匹配(为了测试目的,我以三种不同的方式设置了“border-right-color”)。 但是当我把它放在我的网络应用程序中时不起作用。 我可以设置所有
2回复

Bootstrap 4 更改特定元素的工具提示颜色

我正在尝试通过这些命令将带有类alert-danger的icons的工具提示背景颜色更改为红色,将alert-success更改为绿色: 我在这个StackOverflow 链接上找到了这个解决方案。 我面临的问题是,每次我将鼠标悬停在图标上时,Boostrap 代码都会在body标记的底部创
1回复

图像变色时如何更改颜色并显示工具提示?

我用字体真棒图标更改了输入类型文件按钮,因此当我要浏览图片时,可以单击图标(字体真棒)。 现在我要的是-如果选择了图片,则使图标变为绿色,并且当光标触摸它时,工具提示将显示图片名称/文件名。 这是更改浏览按钮的脚本 对不起,我的语言,我是新来的...。
2回复

jQuery中的工具提示鼠标移动问题

我在鼠标移动时使用了工具提示。 它的工作正常。 但我无法在锚标记元素内访问。 鼠标光标不应在工具提示容器内移动。 我没有使用任何插件作为工具提示。 谁能解决这个问题。
3回复

如何更改工具提示的背景颜色?

我在html文件中创建了一个工具提示,如下所示: 我将CSS属性设置为: 上面的样式完美地创建了工具提示。 我面临的唯一问题是我希望工具提示的背景颜色是蓝色。 但是它始终显示为灰色。 为什么会这样呢?
2回复

如何更改工具提示的位置

我的要求就像我只需要在左侧显示工具提示,我不希望它在右侧显示。 为了实现此目的,我需要做哪些CSS更改。 请帮我解决这个问题。 注意:我不想使用任何类型的插件,仅在html(title)tooltip中进行更改。 HTML CSS 在这里,我附上了我尝试过的链接
1回复

jQuery:鼠标悬停在背景div“通过”前景工具提示?

我有一个背景div和一个前景div,当背景被遮住时淡入,并在背景被淘汰时淡出。 但是当前景淡入时,它会从背景中窃取焦点并且工具提示最终“闪烁”: http://jsfiddle.net/ts97t/ 如何保持工具提示可见并停止闪烁? 谢谢
1回复

鼠标悬停的SVG工具提示?

所以我有一个带有标记位置和多边形的SVG地图。 使用CSS,区域比地图的其他区域更亮,并且在悬停时它们的颜色不同。 到目前为止还没有JS代码。 现在我想创建一个带有文本(Tooltip?)的悬停窗口,只要鼠标在某个区域上方,我希望该窗口显示悬停在地图的正确区域上。 最简单的方法是