How to keep tooltip formatting after Ajax call

Question

I am formatting some tooltips in my datagrid and everything works great until I go to the next page using an Ajax call. Here is the basic code I am using. I think I should use "on", but several attempts haven't worked well. I'm assuming that this is a basic jQuery answer, but I can post the Ajax paging code too if necessary.

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>  
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">  
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">



  <style type='text/css'>
    .ui-tooltip {    
        padding: 10px 20px;
        border-radius: 20px;
        font: bold 14px"Helvetica Neue", Sans-Serif;
        font-size: 0.75em;
        box-shadow: 0 0 7px black;
        width:210px;
        z-index:1000;
    }
    .ui-tooltip.PE {
        color: #000000;
        background: #E680B2 !important;
    }
    .ui-tooltip.PC {
        color: #000000;
        background: #B2D1FF;
    }
    .ui-tooltip.PU {
        color: #000000;
        background: #7A0099;
    }

      </style>


<script type='text/javascript'>    //<![CDATA[ 
    $(function() {
        $('td.tips').each(function() {
            var style = $(this).data('info');
            $(this).tooltip({
                content: function() {
                    return '<em>' + $(this).attr('title') + '</em>';
                },
                tooltipClass: style,
                show: "slideDown",
                open: function(event, ui) {
                    ui.tooltip.hover(function() {
                        $(this).fadeTo("slow", 0.5);
                    });
                }
            });
        });

    }); //]]>  

</script>  

The HTML would be something like this:

  <table border="1">
<tr>
    <td title="(Incomplete P/N, Wrong P/N, Invalid P/N, etc...)" data-info="PC" class="tips"><span id="grdNoGoods_ctl12_lblBuyerComments">10/16/2014 - Req to be cancelled per PC</span></td>
<td title="test1" class="tips" data-info="PE">John Black</td>
<td title="test2" class="tips" data-info="PU">John Black</td>
</tr>
<tr>
                <td colspan="3">
<table border="0">
                    <tr>
                        <td><b>Page Size: </b><select name="grdNoGoods$ctl15$ctl01" onchange="javascript:setTimeout('__doPostBack(\'grdNoGoods$ctl15$ctl01\',\'\')', 0)">
                            <option selected="selected" value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="75">75</option>
                            <option value="100">100</option>
                            <option value="150">150</option>
                            <option value="200">200</option>

                        </select></td><td><span>1</span></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$2')">2</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$3')">3</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$4')">4</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$5')">5</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$6')">6</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$7')">7</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$8')">8</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$9')">9</a></td>
                    </tr>
</table>
</tr>
</table>

Answer 1

Exploring my previous answer, I realized that solution would not work in your case. The reason is .tooltip() doesn't actually show the tooltip the first time it's called.

In fact, there's nothing wrong with the code you have posted right now. The problem likely lies in your ajax code. Since you never posted your ajax code, I'll just assume you don't have anything like this and give you the complete solution I came up with.

Here it is in a simplified form. Also look at this jsFiddle for a working solution using your style & code.

In short, you need a function to add the tooltip property to your elements. Then, you'll run that function on the initial page load and on every successive loading of new elements from your ajax callback.

var setupTooltip = function (tooltippy_thing) {
    // Configure tooltips according to the style in your old code.
    tooltippy_thing.tooltip(...);
};

$(function () {
    // Apply the tooltip formatting to all the td.tips on page.
    $('td.tips').each(function () {
        setupTooltip($(this));
    });
});

var ajax_callback = function (ajax_html) {
    // Replace the table rows with the new ajax ones.
    $('table').html(ajax_html);

    // Apply the tooltip formatting to the new td.tips.
    ajax_html.find('td.tips').each(function() {
        setupTooltip($(this));
    });
});

Answer 2

If your ajax call is loading new td.tips elements onto the page, those elements won't be loaded with the jQuery event handlers you specify. To get around this, instead of attaching the tooltip function to each of the existing td.tips elements, you want to attach it to an element that is always present on the page — maybe <body> or the <table> itself. In the .on method, be sure to put a selector that targets only the elements you want the tooltip to show on.

In other words, something like this:

$('body').on({
    mouseenter: function () {
        // show the tooltip
    },
    mouseleave: function () {
        // hide the tooltip
    }
}, 'td.tips');

(Edit: removed last function from .on call. See: http://api.jquery.com/on/#on-events-selector-data)