Підказка Bootstrap - приховати, коли натискає іншу підказку

Я сподіваюсь, хтось може допомогти.

Я намагаюсь сховати підказку, коли натискати іншу піктограму підказки. Це працює, але коли я вирішив ще раз натиснути останню підказку, він «блимає» підказкою.

var Hastooltip = $('.hastooltip');
HasTooltip.on('click', function(e) {
     e.preventDefault();
     HasTooltip.tooltip('hide');
}).tooltip({
     animation: true
}).parent().delegate('.close', 'click', function() {
     HasTooltip.tooltip('hide');
});

HTML


    

Info 1

Info 2

Якщо це допомагає, наступна розмітка додається до DOM, коли користувач натискає кнопку, щоб відобразити підказку.

<div class="tooltip"</div>
27
Чи можете ви опублікувати свій HTML теж?
додано Автор ZimSystem, джерело
не можу отримати ваше запитання ... tooltip або popover? тому що підказка зникає при відпустці мишки
додано Автор sangram parmar, джерело
Звичайно, додав, що для вас.
додано Автор user1381806, джерело
Використання підказки. twitter.github.com/bootstrap/javascript.html#tooltips - я хочу це так, якщо підказка є видимою і натискається інша підказка; видима підказка буде приховуватися.
додано Автор user1381806, джерело

7 Відповіді

Це можна обробити легше, ніж зазначені вище відповіді. Ви можете зробити це за допомогою одного рядка JavaScript у своєму обробнику вистави:

$('.tooltip').not(this).hide();

Ось повний приклад. Змінити "елемент", щоб відповідати вашому селектору.

$(element).on('show.bs.tooltip', function() {
   //Only one tooltip should ever be open at a time
    $('.tooltip').not(this).hide();
});

Той самий метод пропонується для закриття popovers в цьому потоці SO:

Як можна Я закриваю поштову панель запуску Twitter-запуску з клацанням з будь-якого місця (ще) на сторінці?

47
додано
Це дійсно добре! Дякую!
додано Автор Abdo, джерело
Це має бути відповіддю.
додано Автор Paul, джерело
На жаль, у цьому виникають деякі проблеми, коли тригер використовує як hover , так і click .
додано Автор dude, джерело
Це геній і повинно стати новою прийнятою відповіддю! Дякую!
додано Автор Alveoli, джерело
Саме те, що я шукав. $ ('. tooltip'). підказка ('hide'); не працював, але $ ('. tooltip'). not (this) .hide (); зробив це !
додано Автор C0ZEN, джерело
Це працює для мене, окрім того, як тільки підказка була прихована, щоб показати її знову, я повинен натиснути її двічі
додано Автор JayJay, джерело

Потрібно перевірити, чи відображається підказка, і вмикати його видимість вручну. Це один з способів це зробити.

$(function() {
  var HasTooltip = $('.hastooltip');
  HasTooltip.on('click', function(e) {
    e.preventDefault();
    var isShowing = $(this).data('isShowing');
    HasTooltip.removeData('isShowing');
    if (isShowing !== 'true')
    {
      HasTooltip.not(this).tooltip('hide');
      $(this).data('isShowing', "true");
      $(this).tooltip('show');
    }
    else
    {
      $(this).tooltip('hide');
    }

  }).tooltip({
    animation: true,
    trigger: 'manual'
  });
});
13
додано
Який безлад! Схоже на класичний приклад зшивання мух з кувалдою.
додано Автор Fr0zenFyr, джерело
Чи можна перемикати підказки? тому, якщо я натиснув ту саму підказку, яка вже встановлена ​​на істину, вона буде налаштована на прихований.
додано Автор user1381806, джерело
Дуже дякую. Насправді щось навчився.
додано Автор user1381806, джерело
див. редагування у відповідь
додано Автор Knollbert, джерело
Ви могли б зробити це просто, видаливши анімацію, але це змінить зовнішній вигляд.
додано Автор Knollbert, джерело

Я зайшов до тієї ж проблеми для звичайних підказок. На iPhone вони не йдуть, натискаючи тіло (тобто десь ще).

Моє рішення полягає в тому, що, коли ви натискаєте саму підказку, вона ховається. IMHO, це повинно бути інтегровано в розподіл завантаження, оскільки мало коду з великим ефектом.

Коли ви маєте доступ до вихідних джерел, додайте

this.tip().click($.proxy(this.hide, this))

як останній рядок у методі Tooltip.prototype.init у файлі tooltip.js:

Tooltip.prototype.init = function (type, element, options) {
this.enabled  = true
this.type     = type
this.$element = $(element)
this.options  = this.getOptions(options)

var triggers = this.options.trigger.split(' ')

for (var i = triggers.length; i--;) {
  var trigger = triggers[i]

  if (trigger == 'click') {
    this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
  } else if (trigger != 'manual') {
    var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focus'
    var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'

    this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
    this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
  }
}

this.options.selector ?
  (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
  this.fixTitle()

//Hide tooltip when clicking on it. Useful for mobile devices like iPhone where eventOut
//(see above) on $element is not triggered and you don't get rid of the tooltip anymore.
 this.tip().click($.proxy(this.hide, this))
  }

Якщо у вас немає джерел, ви можете досягти такого ж ефекту:

    $(function()
    {
       //Apply tooltips
        var hasTooltip = $("[data-toggle='tooltip']").tooltip();

       //Loop over all elements having a tooltip now.
        hasTooltip.each(function()
           {
              //Get the tooltip itself, i.e. the Javascript object
               var $tooltip = $(this).data('bs.tooltip');

              //Hide tooltip when clicking on it
               $tooltip.tip().click($.proxy($tooltip.hide, $tooltip))
           }
        );
    });

Для мене це робить хороший користувацький досвід на iPhone: натисніть на елемент, щоб побачити підказку. Клацніть на підказці, що він зникне.

2
додано

Я шукав вирішення цієї проблеми, і мені здається, що $ ('. Tooltip'). Not (this) .hide (); буде обходити будь-який завантажувальний текст show , показаний , hide або hidden , які можуть бути прикріплені до тригера. Після деякої думки, я запропонував наступний код, який дозволяє трохи більш прозорому керуванню доданими подіями.

Примітка. Тестовано лише на Firefox і Chrome, але теорія повинна нормально працювати.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$(document).ready(function() {

  $('[data-toggle="popover"]').popover();


  $(document).on('show.bs.popover', function(event) {
   //could use [data-toggle="popover"] instead
   //using a different selector allows to have different sets of single instance popovers.
    $('[data-popover-type="singleton"]').not(event.target).each(function(key, el) {
      $(el).popover('hide');//this way everything gets propagated properly
    });
  });

  $(document).on('click', function(event) {
   //choose to close all popovers if clicking on anything but a popover element.
    if (!($(event.target).data('toggle') === "popover" /* the trigger buttons */ 
          || $(event.target).hasClass('popover') /* the popup menu */
          || $(event.target).parents('.popover[role="tooltip"]').length /* this one is a bit fiddly but also catches child elements of the popup menu. */ )) {
      
      $('[data-toggle="popover"]').popover('hide');
    }
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />



<button type="button" class="btn btn-danger" data-placement="bottom" data-toggle="popover" title="Popover One" data-content="Popover One Content. `focus` trigger still behaves as expected" data-trigger="focus" data-popover-type="singleton">Popover One</button>

<button type="button" class="btn btn-warning" data-placement="bottom" data-toggle="popover" title="Popover Two" data-content="Popover Two Content. for other triggers, clicking on content does not close popover" data-trigger="click" data-popover-type="singleton">Popover Two</button>

<button type="button" class="btn btn-success" data-placement="bottom" data-toggle="popover" title="Popover Three" data-content="Popover Three Content. clicking outside popover menu closes everything" data-trigger="click" data-popover-type="singleton">Popover Three</button>
</div> </div>

fiddle example here: http://jsfiddle.net/ketwaroo/x6k1h7j4/

1
додано
$('[data-toggle=tooltip],[rel=tooltip]').tooltip({ 
        container: 'body' }).click(function() {
        $('.tooltip').not(this).hide();
    });
1
додано
Замість того, щоб опублікувати посилання як відповідь, додайте деякий текст, щоб пояснити, як ця відповідь допомагає ОР у виправленні поточної проблеми. Дякую
додано Автор ρяσѕρєя K, джерело

Я трохи змінив код кіпрайней

const $tooltip = $('[data-toggle="tooltip"]');
 $tooltip.tooltip({
   html: true,
   trigger: 'click',
   placement: 'bottom',
 });
 $tooltip.on('show.bs.tooltip',() => {
   $('.tooltip').not(this).remove();
 });

Я використовую видалити() замість hide ()

1
додано
remove() краще, особливо якщо ви намагаєтесь позбутися підказки на динамічно заміщеному елементі.
додано Автор kjdion84, джерело

Дякую Джохен за "Iphone", натисніть на підказку, щоб закрити рішення, саме те, що я шукав.

Що стосується оригінального запиту (запобігання кільком підказкам, то це є очевидною необхідністю, коли вас просять застосувати натискання підказки, а не перезавантажувати), ось мій прийом:

Відразу після , показати: function() { add:

 //HACK BEGIN
 //Quick fix. Only one tooltip should be visible at all time.
 //prototype level property are accessible to all instances so we use one to track last opened tooltip (ie. current this).
  if ( (Tooltip.prototype.currentlyShownTooltip != null) || (Tooltip.prototype.currentlyShownTooltip != undefined) ) {
   //Close previously opened tooltip.
    if (Tooltip.prototype.currentlyShownTooltip != this) {//Conflict with toggle func. Re-show.
        Tooltip.prototype.currentlyShownTooltip.hide();
        Tooltip.prototype.currentlyShownTooltip = null
    }
  }
 //Keep track of the currently opened tooltip.
  Tooltip.prototype.currentlyShownTooltip = this
 //HACK END
0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram