0

ツールチップを表示する jQuery プラグインを作成しています。toolitp がドロップダウン メニューとして機能するオプションを追加したいと思います。ツールチップの上にカーソルを移動すると、そのツールチップ内のリンクをクリックできるということです。問題は、ツールチップの上にカーソルを移動しようとすると、カーソルが消えてしまうことです。この場合は歓迎されません。

JavaScript (例):

(function($) {

$.fn.jTooltip = function(options) {

    var defaults = {
        'location': 'right',
        'menu': false,
        'className': 'default',
        'content': 'tooltip content',
        'top': 0,
        'left': 0,
        'overlay': false,
        'zIndex': 2000
    },
        settings = $.extend({}, defaults, options);
    this.each(function() {
        var $this = $(this);
        $this.mouseover(function() {
            if (settings.menu) {
                $(this).addClass('menu');
                $(document).on('mouseleave', '.show-tip', function() {
                    $(".tip-top").remove();
                });
            }

            if (settings.location == 'bottom') {
                thisCss = {
                    'top': $this.offset().top + $this.innerHeight() + 10 + settings.top,
                    'left': $this.offset().left + settings.left,
                    'z-index': settings.zIndex
                };
            }
            if (settings.location == 'right') {
                thisCss = {
                    'top': $this.offset().top - $this.innerHeight() + 5 + settings.top,
                    'left': $this.offset().left + $this.innerWidth() + 5 + settings.left,
                    'z-index': settings.zIndex
                };
            }
            $('<div id="jTooltip" />').appendTo('body').html(settings.content).addClass(settings.className).css(thisCss);
            if (settings.overlay) {
                $('<div id="overlay" />').appendTo('body').css({
                    'opacity': 0.5,
                    'background': '#000',
                    'position': 'absolute',
                    'left': 0,
                    'top': 0,
                    'z-index': 1000,
                    'width': '100%',
                    'height': '100%'
                });
            }
        });
        $(this).mouseleave(function() {
            $("#jTooltip").remove();
        });
        return this;
    });
};

})(jQuery);
$('.show-tooltip').jTooltip({
    'location': 'bottom',
    'menu': 'true'
});​
4

2 に答える 2

2

必要な名前付きオプションを追加する必要があります....私はそれを呼びますsticky

次に、を次のように変更mouseleaveします。

if( !settings.sticky){    
    $(this).mouseleave(function() {
                $("#jTooltip").remove();
    });
 }else{
  /* logic to remove when user interacts with dropdown or moves on to another tooltip element*/
  /* may need to check if a tooltip already exists in prior code and remove it before adding new one*/
   /*  what you do will depend on UI you want when sticky is used*/

 }
于 2012-11-16T23:27:26.423 に答える
1

ユーザーがコンテキストメニューにアクセスすると、メニューが表示されたままになるか、非表示になる場合は、コンテキストメニューにアクセスするのに1〜2秒かかります。

$(this).mouseleave(function() {
                t = setTimeout(function() {
                    $("#jTooltip").remove();
                }, 2000);
                $('#jTooltip').hover(function() {
                    clearTimeout(t);
                }, function() {
                    $(this).remove();
                });
            });

フィドル - http://jsfiddle.net/rWRV5/1/

于 2012-11-16T23:32:23.223 に答える