Only close tooltip if mouse is not over target or tooltip

Question 1

Here is the solution I came up with after much searching and testing: http://jsfiddle.net/Handyman/fNjFF/11/

$('#target').tooltip({
    items: 'a.target',
    content: 'Loading…',
    show: null, // show immediately
    open: function(event, ui)
    {
        if (typeof(event.originalEvent) === 'undefined')
        {
            return false;
        }
    
        var $id = $(ui.tooltip).attr('id');
    
        // close any lingering tooltips
        $('div.ui-tooltip').not('#' + $id).remove();
        
        // ajax function to pull in data and add it to the tooltip goes here
    },
    close: function(event, ui)
    {
        ui.tooltip.hover(function()
        {
            $(this).stop(true).fadeTo(400, 1); 
        },
        function()
        {
            $(this).fadeOut('400', function()
            {
                $(this).remove();
            });
        });
    }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
    <div id="target">
        <a href="#" class="target">Hover over me!</a>
        <a href="#" class="target">Hover over me too!</a>
    </div>
</body>

I was also having a problem with lingering tooltips when there were a bunch of tooltip links in close proximity, so the tooltips would end up stacking or not closing at all, so this closes all other open tooltips when a tooltip is opened.

Question 2

This is a simple solution for div elements:

$(function() {
    $("#mydiv").tooltip({
        effect: 'slide',
        content: 'loading...',
        open: function (event, ui) {
            $(ui.tooltip).appendTo(this);
        }
    });
});

http://jsfiddle.net/4YDGp/10/

Question 3

It isn't built in, as they jQuery UI team didn't think it'd add value. You can read the feature request here. There are some links to projects like this one (demo) that add the effect you're looking for.

You can do this with that minimal plugin:

$('[title|=ptooltip]').pTooltip();

Or you can look into qTip or other more robust plugins.

Question 4

I had a similar goal of having a bootstrap tooltip with an HTML link stay open until clicking somewhere else or open another tooltip (so the user can click the link in the tool tip).

Here is my solution based on some previous posts:

/**
  * For tooltips with links, don't remove hover until click somewhere else or open another tooltip
  */
 $(function() {
   // Show tooltip with html link 
   $('#tip').on("mouseover", function() {
     $('#tip').tooltip('show');
   });

   // If open any other tooltip, close the one with the link.
   $('[rel="tooltip"]').not('#tip').on("mouseover", function() {
     $('#tip').tooltip('hide');
   });

   // If click any where hide tooltip with link
   $(document).click(function() {
     $('#tip').tooltip('hide');
   });
 });

The HTML for the looks like this. The key is having the data-trigger set to "" for the tip with the HTML.

<span id="tip" data-trigger="" rel="tooltip" data-html="true" title="This is the <a href= &quot; https://www.google.com &quot; target=‘_blank’ rel=‘noopener’>tip</a>."> Linked ToolTip </span>

JSFiddle