Только закрыть всплывающую подсказку, если мышь не находится над мишенью или всплывающей подсказкой

Используя подсказку jQuery UI, я хотел бы оставить всплывающую подсказку открытой, если я над мишенью, или если я над самой всплывающей подсказкой.

Я думаю, что могу использовать закрытый обратный вызов, чтобы проверить, не превышает ли я подсказку или целевую область, хотя мне пришлось бы назначить другую функцию мыши.

Здесь мой jsfiddle: http://jsfiddle.net/Handyman/fNjFF/

$(function()
{
    $('#target').tooltip({
        items: 'a.target',
        content: 'just some text to browse around in'
    });
});

<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>
<div id="target">
    <a href="#" class="target">Hover over me!</a>
    <a href="#" class="target">Hover over me too!</a>
</div>

Ответ 1

Вот решение, которое я придумал после долгих поисков и тестирования: 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>

Ответ 2

Это простое решение для элементов div:

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

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

Ответ 3

Он не встроен, поскольку команда jQuery UI не думала, что это добавит ценность. Вы можете прочитать запрос функции здесь. Есть несколько ссылок на такие проекты, как этот (демонстрация) которые добавляют эффект, который вы ищете.

Вы можете сделать это с помощью этого минимального плагина:

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

Или вы можете посмотреть qTip или другие более надежные плагины.

Ответ 4

У меня была аналогичная цель иметь всплывающую подсказку с ссылкой на HTML-ссылку, оставаясь открытой до щелчка в другом месте или открыть другую подсказку (чтобы пользователь мог щелкнуть ссылку в подсказке инструмента).

Вот мое решение, основанное на некоторых предыдущих сообщениях:

/**
  * 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');
   });
 });

HTML выглядит так. Ключ имеет триггер данных, установленный для "подсказки" с 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