Javascript Tooltip наведите курсор и нажмите

Question

Мне нужна помощь с помощью всплывающей подсказки в javascript. Код, который у меня ниже, хорошо работает при наведении курсора, но я не могу поместить функцию снаружи, чтобы ее можно было вызвать щелчком. В функции есть всего лишь материал для расчета позиции всплывающей подсказки и способа ее появления, и это работает.

Большое спасибо за помощь.

var targets = $('[rel~=tooltip]'), 
    target = false, 
    tooltip = false, 
    title = false; 

targets.on('mouseenter', function() 
{ 
    target = $(this); 
    tip  = target.attr('title'); 
    tooltip = $('<div id="tooltip"></div>'); 



    if(!tip) { 
     return false; 
    } 

    target.removeAttr('title'); 
    tooltip.css('opacity', 0) 
      .html(tip) 
      .appendTo('body'); 

    var init_tooltip = function() 
    { 
     containerList = $('.container').find('.listImages'); 

     if(containerList.width() < tooltip.outerWidth() * 1.5) 
      tooltip.css('max-width', containerList.width()/2); 
     else 
      tooltip.css('max-width', 340); 

     var pos_left = target.offset().left + (target.outerWidth()/2) - (tooltip.outerWidth()/2), 
      pos_top = target.offset().top + target.outerHeight(), 
      pos_right = target.offset().right + (target.outerWidth()/2) - (tooltip.outerWidth()/2); 

      console.log(pos_right) 

     if(pos_left < containerList.offset().left) 
     { 
      pos_left = target.offset().left; 
      tooltip.addClass('left'); 
     } 
     else { 
      tooltip.removeClass('left'); 
     } 

     if(pos_left + tooltip.outerWidth() > containerList.offset().left + containerList.width()) 
     { 
      pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth(); 
      tooltip.addClass('right'); 
     } 
     else { 
      tooltip.removeClass('right'); 
     } 


     if(pos_top < 0) 
     { 
      var pos_top = target.offset().top + target.outerHeight(); 
      tooltip.addClass('top'); 
     } 
     else { 
      tooltip.removeClass('top'); 
     } 

     tooltip.css({ left: pos_left, top: pos_top }) 
       .animate({ top: '+=10', opacity: 1 }, 50); 
    }; 

    init_tooltip(); 
    $(window).resize(init_tooltip); 

    var remove_tooltip = function() 
    { 
     tooltip.animate({ top: '-=10', opacity: 0 }, 50, function() 
     { 
      $(this).remove(); 
     }); 

     target.attr('title', tip); 
    }; 



    target.bind('mouseleave', remove_tooltip); 

}); 

Answer 1

Я создал скрипку на основе от того, что вы предоставили в вашем вопросе: http://jsfiddle.net/R26Ba/1/

Однако, поскольку у меня нет полной реализации вашей страницы это больше теории, основанной, чем на самом деле быть полезным в пределах Скрипки.

По сути то, что я сделал создается объект Tooltip:

function Tooltip(el) { 
    //... 
} 

Какие есть методы прототипа create, position и destroy. Затем создали пользовательские привязки, которые создаются и уничтожаются Tooltips на основе mouseevents:

$('[rel~=tooltip][title]').on({ 
    'tooltip.create': function() { 
     $(this).trigger('tooltip.destroy'); 

     activeTooltip = new Tooltip(this); 
    }, 
    'tooltip.destroy': function() { 
     if(activeTooltip) { 
      activeTooltip.destroy(); 
     } 
    }, 
    'mouseenter': function() { 
     $(this).trigger('tooltip.create'); 
    }, 
    'mouseleave': function() { 
     $(this).trigger('tooltip.destroy'); 
    }, 
    'click': function(e) { 
     e.stopPropagation(); 

     if(activeTooltip && activeTooltip.el == this) { 
      $(this).trigger('tooltip.destroy'); 
     } else { 
      $(this).trigger('tooltip.create'); 
     } 
    } 
}); 

$(document.body).on('click', function() { 
    if(activeToolTip) { 
     activeTooltip.destroy(); 
    } 
}); 

$(window).on('resize', function() { 
    if(activeTooltip) { 
     activeTooltip.position(); 
    } 
}); 

Кроме того, побочное замечание: Вы можете заметить, что я вымыл много из outerWidth/Height и offset вызовов. Эти функции могут быть очень дорогими (с точки зрения производительности) для вызова, поэтому вы действительно хотите следить за количеством раз, когда вы должны их использовать.

Боковое примечание 2: Вы также можете использовать плагин событий resizeEnd для jQuery. Это уменьшит количество вызовов метода position и повысит общую производительность.

Side Примечание 3: Я сейчас смеется над собой, потому что я пошел в эту работу, а потом просто понял ... Как вы собираетесь нажать на элемент без вызывая mouseenter событие стрелять?

Answer 2

Если вы хотите повторно использовать функцию init_tooltip, вы можете объявить ее вне события mouseenter, передав два параметра: target и tooltip.

Определение init_tooltip функция будет выглядеть так:

var init_tooltip = function(target, tooltip) 

Затем в случае MouseEnter, вы бы:

init_tooltip(target, tooltip); 
$(window).resize(function() { init_tooltip(target, tooltip); }); 

Таким образом, вы можете использовать его для обработчика событий нажмите как ну, вот так:

targets.on('click', function() { 
    tooltip = $('<div id="tooltip"></div>'); 
    init_tooltip($(this), tooltip); 
}); 

Возможно, вам потребуется воспроизвести свою логику в cl ick, чтобы определить, следует ли показывать или скрывать всплывающую подсказку.

Answer 3

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

$("body").append('<div id="tooltip"></div>'); 

var activeTooltip = null, 
    $tooltip = $('#tooltip'), 
    $containerList = $('#content .listImages'); 

function Tooltip(el) { 
    this.el = el; 
    this.$el = $(el); 
    this.text = this.$el.attr('data-content'); 

    this.create(); 
} 

$.extend(Tooltip.prototype, { 
    'create': function() { 
     this.$el.removeAttr('data-content'); 

     $tooltip.css({ 
      'opacity': 0 
     }).text(this.text); 

     this.position(); 
    }, 
     'position': function() { 
     var conWidth = $containerList.width(), 
      conOffset = $containerList.offset(), 
      toolWidth = $tooltip.outerWidth(); 

     if (conWidth < $tooltip.outerWidth() * 1.5) { 
      $tooltip.css('max-width', conWidth/2); 
     } else { 
      $tooltip.css('max-width', 340); 
     } 

     var elOffset = this.$el.offset(), 
      elWidth = this.$el.outerWidth(), 
      elHeight = this.$el.outerHeight(), 
      pos_left = elOffset.left + (elWidth/2) - (toolWidth/2), 
      pos_top = elOffset.top + elHeight; 

     if (this.$el.offset().left + (elWidth/2) - ($tooltip.outerWidth()/2) < conOffset.left) { 
      pos_left = this.$el.offset().left; 

      $tooltip.addClass('left'); 
     } else { 
      $tooltip.removeClass('left'); 
     } 

     if (elOffset.left + (this.$el.outerWidth()/2) - ($tooltip.outerWidth()/2) + $tooltip.outerWidth() > $containerList.offset().left + $containerList.width()) { 
      pos_left = this.$el.offset().left - $tooltip.outerWidth() + this.$el.outerWidth(); 
      $tooltip.addClass('right'); 
     } else { 
      $tooltip.removeClass('right'); 
     } 

     if (elOffset.top + this.$el.outerHeight() < 0) { 
      pos_top = elOffset.top + this.$el.outerHeight(); 

      $tooltip.addClass('top'); 
     } else { 
      $tooltip.removeClass('top'); 
     } 

     $tooltip.css({ 
      'left': pos_left, 
      'top': pos_top 
     }) 
      .animate({ 
      'top': '+=10', 
      'opacity': 1 
     }, 50); 
    }, 
     'destroy': function() { 
     $tooltip.animate({ 
      'top': '-=10', 
      'opacity': 0 
     }, 50); 

     this.$el.attr('data-content', this.text); 

     activeTooltip = null; 
    } 
}); 

var savelastTooltip, activeSaveTooltip = false; 

$('[rel~=tooltip][data-content]').on({ 
    'tooltip.create': function() { 
     $(this).trigger('tooltip.destroy'); 
     activeTooltip = new Tooltip(this); 
    }, 
    'tooltip.destroy': function() { 
     if (activeTooltip) { 
      activeTooltip.destroy(); 
     } 
    }, 
    'mouseenter': function() { 
     $(this).trigger('tooltip.create'); 
    }, 
    'mouseleave': function() { 
     $(this).trigger('tooltip.destroy'); 
     if(true === activeSaveTooltip) 
     { 
      activeTooltip = new Tooltip(savelastTooltip); 
     } 
    }, 
    'click': function (e) { 
     e.stopPropagation(); 
     activeSaveTooltip = true; 
     savelastTooltip = this; 

     if (activeTooltip && activeTooltip.el != this) { 
      $(this).trigger('tooltip.destroy'); 
     } else if(activeTooltip && activeTooltip.el == this) { 
      $(this).off('mouseleave'); 
     } else { 
      $(this).trigger('tooltip.create'); 
     } 
    } 
}); 

$(window).on('resize', function() { 
    if (activeTooltip) { 
     activeTooltip.position(); 
    } 
});