web-dev-qa-db-fra.com

Widget info-bulle jQueryUI pour afficher l'info-bulle en un clic

Comment le nouveau widget info-bulle de jQueryUI peut être modifié pour ouvrir l'événement info-bulle sur clic sur certains éléments du document, tandis que les autres affichent toujours leur info-bulle sur événement survol. En cas d'ouverture par clic, l'infobulle doit être fermée en cliquant ailleurs sur le document.

Est-ce possible?

jquery-uiwidgetonclicktooltip
10
besq

La réponse précédente n'utilise pas jqueryui et son assez complexe.

Cela marche:

HTML:

<div id="tt" >Test</div>

JS:

$('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "Displaying on click"});
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});

Vous pouvez le vérifier en utilisant http://jsfiddle.net/adamovic/A44EB/

27
Mladen Adamovic

Ce code crée une info-bulle qui reste ouverte jusqu'à ce que vous cliquiez en dehors de l'info-bulle. Cela fonctionne même après avoir ignoré l'info-bulle. C'est une élaboration de réponse de Mladen Adamovic .

Violon: http://jsfiddle.net/c6wa4un8/57/

Code:

var id = "#tt";
var $elem = $(id);

$elem.on("mouseenter", function (e) {
    e.stopImmediatePropagation();
});

$elem.tooltip({ items: id, content: "Displaying on click"});

$elem.on("click", function (e) {
    $elem.tooltip("open");
});


$elem.on("mouseleave", function (e) {
    e.stopImmediatePropagation();
});


$(document).mouseup(function (e) {
    var container = $(".ui-tooltip");
    if (! container.is(e.target) && 
        container.has(e.target).length === 0)
    {
        $elem.tooltip("close");
    }
});
11
Marco Sulla

Cette réponse est basée sur le travail avec différentes classes. Lorsque l'événement click a lieu sur un élément avec la classe 'trigger', la classe est changée en 'trigger on' et l'événement mouseenter est déclenché afin de le transmettre à jquery ui.

Le Mouseout est annulé dans cet exemple pour que tout soit basé sur les événements de clic.

HTML

<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1"  title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2"  title="bla bla 2">
?</button>
</p>

jQuery

$(document).ready(function(){ 
$(function () {
//show
$(document).on('click', '.trigger', function () {
    $(this).addClass("on");
    $(this).tooltip({
        items: '.trigger.on',
        position: {
            my: "left+15 center",
            at: "right center",
            collision: "flip"
        }
    });
    $(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
    $(this).tooltip('close');
    $(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
    e.stopImmediatePropagation();
});
})
})

http://jsfiddle.net/AK7pv/111/

6
Dimi

Je joue avec ce problème aujourd'hui, je pensais partager mes résultats ...

En utilisant l'exemple de l'info-bulle jQueryUI, le style personnalisé et le contenu personnalisé

Je voulais avoir un hybride de ces deux. Je voulais pouvoir avoir un popover et non une info-bulle, et le contenu devait être du HTML personnalisé. Donc pas d'état de vol stationnaire, mais plutôt un état de clic.

Mon JS est comme ça:

       $(function() {
        $( document ).tooltip({
            items: "input",
            content: function() {
                return $('.myPopover').html();
            },
            position: {
                my: "center bottom-20",
                at: "center top",
                using: function( position, feedback ) {
                    $( this ).css( position );
                    $( "<div>" )
                            .addClass( "arrow" )
                            .addClass( feedback.vertical )
                            .addClass( feedback.horizontal )
                            .appendTo( this );
                }
            }
        });

        $('.fireTip').click(function () {
            if(!$(this).hasClass('open')) {
                $('#age').trigger('mouseover');
                $(this).addClass('open');
            } else {
                $('#age').trigger('mouseout');
                $(this).removeClass('open');
            }

        })

    });

La première partie est plus ou moins une copie directe de l'exemple de code du site UI avec l'ajout d'éléments et de contenu dans le bloc d'info-bulles.

Mon HTML:

   <p> 
       <input class='hidden' id="age"  /> 
       <a href=# class="fireTip">Click me ya bastard</a>
   </p>

  <div class="myPopover hidden">
       <h3>Hi Sten this is the div</h3>
  </div>

Fondamentalement, nous trompons l'état de survol lorsque nous cliquons sur la balise d'ancrage (classe fireTip), la balise d'entrée qui contient l'info-bulle a un état de survol invoqué, ce qui déclenche l'info-bulle et la maintient aussi longtemps que nous le souhaitons ... Le CSS est activé le violon ...

Quoi qu'il en soit, voici un violon pour voir l'interaction un peu mieux: http://jsfiddle.net/AK7pv/

5
Sten Muchow

La réponse de Mladen Adamovic a un inconvénient. Cela ne fonctionne qu'une seule fois. L'info-bulle est alors désactivée. Pour le faire fonctionner à chaque fois, le code doit être complété par l'activation de l'info-bulle au clic.

 $('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "Displaying on click"});
    $(this).tooltip("enable"); // this line added
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});
3
piradian

Cette version garantit que l'info-bulle reste visible suffisamment longtemps pour que l'utilisateur déplace la souris sur l'info-bulle et reste visible jusqu'à ce que la souris soit sortie. Pratique pour permettre à l'utilisateur de sélectionner du texte dans l'infobulle.

$(document).on("click", ".tooltip", function() {
    $(this).tooltip(
        { 
            items: ".tooltip", 
            content: function(){
                return $(this).data('description');
            }, 
            close: function( event, ui ) {
                var me = this;
                ui.tooltip.hover(
                    function () {
                        $(this).stop(true).fadeTo(400, 1); 
                    },
                    function () {
                        $(this).fadeOut("400", function(){
                            $(this).remove();
                        });
                    }
                );
                ui.tooltip.on("remove", function(){
                    $(me).tooltip("destroy");
                });
          },
        }
    );
    $(this).tooltip("open");
});

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a>

Exemple: http://jsfiddle.net/A44EB/123/

2
user2438271