Tylko zamknij etykietkę narzędziową, jeśli mysz nie znajduje się nad celem lub podpowiedź

Używając etykiety jQuery UI, chciałbym, aby etykieta narzędzia była otwarta, gdy jestem nad celem lub gdy znajduję się ponad etykietą.Tylko zamknij etykietkę narzędziową, jeśli mysz nie znajduje się nad celem lub podpowiedź

Zastanawiam się, czy mogę użyć tego wywołania zwrotnego, aby sprawdzić, czy jestem nad podpowiedzią lub obszarem docelowym, chociaż musiałbym wtedy przypisać inną funkcję mouseout.

Oto mój 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>

pracuję przez nią teraz zobaczyć, co mogę wymyślić.

Źródło

2013-05-21 Francis Lewis

Oto rozwiązanie wpadłem po wielu poszukiwaniach i testowanie: 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>

Byłem też problem z utrzymujące podpowiedzi gdy było kilka linków podpowiedź w oknie bliskie sąsiedztwo, więc podpowiedzi będą w końcu układać się w stosy lub wcale się nie zamykają, więc zamyka to wszystkie pozostałe otwarte etykiety narzędzi po otwarciu etykiety narzędzia.

Źródło

2013-05-21 06:38:48

Fantastic! Zaoszczędził mi tyle czasu! –

ten fragment kodu: var $ id = $ (ui.tooltip) .attr ('id'); // zamknij wszystkie pozostawione podpowiedzi $ ('div.ui-tooltip'). Not ('#' + $ id) .remove(); jest tak cenny, że powinien być częścią oficjalnej dokumentacji ... –

Nie jest wbudowany, ponieważ zespół jQuery UI nie sądził, że przyniesie on dodatkową wartość. Możesz przeczytać żądanie funkcji here. Istnieje kilka linków do projektów takich jak this one (demo), które dodają efekt, którego szukasz.

Można to zrobić z tym minimalnym plugin:

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

Można też zajrzeć do qTip lub innych, bardziej wytrzymałych wtyczek.

Źródło

2013-05-21 01:12:29 Josh

Jest to proste rozwiązanie dla elementów div:

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

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

Źródło

2013-07-02 23:17:57 Stano

Miałem podobny cel posiadania bootstrap podpowiedź z linkiem HTML pozostają otwarte aż kliknięcie gdzieś indziej lub otworzyć kolejną podpowiedź (aby użytkownik mógł kliknąć łącze w końcówce narzędzia).

Oto moje rozwiązanie opiera się na kilku poprzednich wypowiedzi:

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

Kod HTML wygląda następująco. Klucz polega na ustawieniu wyzwalacza danych na "" dla końcówki z kodem 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

Źródło

2017-08-26 18:09:56

Tylko zamknij etykietkę narzędziową, jeśli mysz nie znajduje się nad celem lub podpowiedź

Odpowiedz

Powiązane problemy