change background color on mouse over in tooltip

Question

When i mouse over on row in a table, image is displayed and when mouse over on image a tooltip is shown. When i mouse over on the options in tooltip(ie, test1,test2) , option on which mouse cursor is placed should highlight or change its background color to let user know which option from tooltip they are about to click. Please find the fiddle http://jsfiddle.net/0w9yo8x6/65/

Below is the sample javascript code:

$(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();
});

Answer 1

i think this is what you're looking for: http://jsfiddle.net/0w9yo8x6/66/

you have to be careful about when to use ids and when to use classes.

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

in the html above, you see how there are two different things with id="test"? Only one of them should register (the first one) because on a DOM, ids have to be unique. so i implemented a class toolTipHover and applied css to that class.

I didnt touch any of the other code, but I would suggest going back over your code to make sure the ids are unique and if there are mutliple elements that you want the same function to apply to, perhaps adding a class would be the best choice.

Answer 2

You don't need to edit the HTML and add another class. You colud achieve this by adding a simple CSS hover effect:

You only need to add the below code:

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

See the entire code below:

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