web-dev-qa-db-ja.com

Bootstrap Tooltip-別のツールチップがクリックされたときに非表示にする

誰かが助けてくれることを願っています。

別のツールチップアイコンをクリックすると、ツールチップを非表示にしようとしています。それは動作しますが、最後のツールチップをもう一度クリックすると、ツールチップが「フラッシュ」します。

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

<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    <h3>Info 1</h3>
</a>

<a href="#" class="hastooltip" data-original-title="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    <h3>Info 2</h3>
</a>

ユーザーがボタンをクリックしてツールチップを表示すると、次のマークアップがDOMに追加されると役立ちます。

<div class="tooltip"</div>
javascriptjquerytwitter-bootstraptooltip
29
user1381806

ツールチップが表示されているかどうかを確認し、表示を手動で切り替える必要があります。これはそれを行う1つの方法です。

$(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'
  });
});
14
Knollbert

これは、上記の回答が示すよりも簡単に処理できます。これを行うには、ショーハンドラーで1行の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();
});

このSOスレッドでポップオーバーを閉じるには、同じ手法が推奨されます。

Twitterを閉じるにはどうすればよいですかBootstrapページのどこか（他）からクリックしてポップオーバーしますか？

52
kiprainey

キプラニーのコードを少し変更しました

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

Hide（）の代わりにremove（）を使用します

4
Радислав Ялилов

通常のツールチップでも同じ問題が発生しました。 iPhoneでは、体をクリックするとき（つまりどこか）に消えません。

私の解決策は、ツールチップをクリックすると非表示になることです。私見、これはbootstrap=ディストリビューションに統合されるべきです。なぜなら、それは大きな効果を持つコードが少ないからです。

bootstrapソースにアクセスできる場合は、

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

ファイルtooltip.jsのメソッドTooltip.prototype.initの最後の行として：

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での優れたユーザーエクスペリエンスを実現します。要素をクリックしてツールチップを表示します。消えるツールチップをクリックします。

3
Jochen
$('[data-toggle=tooltip],[rel=tooltip]').tooltip({ 
        container: 'body' }).click(function () {
        $('.tooltip').not(this).hide();
    });
1
dh-phuong

私もこの問題の解決策を探していましたが、$('.tooltip').not(this).hide();はすべてのbootstrap show、shownをバイパスします、hideまたはhiddenイベントをトリガー要素にアタッチしたかもしれませんが、考えた後、アタッチされたイベントを多少透過的に処理できるようにする次のコードを思いつきました。

注：firefoxおよびchromeでのみテストされていますが、理論上は正常に動作するはずです。

$(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>

フィドルの例： http://jsfiddle.net/ketwaroo/x6k1h7j4/

1
Ketwaroo D. Yaasir

解決策を閉じるためのツールチップをクリックしてくれた「iPhone」をありがとう、まさに私が探していたものです。

元のリクエストについて（ロールオーバーの代わりにクリックツールチップを実装するように求められた場合、複数のツールチップ機能を防止することが明らかに必要です）、ここに私の見解があります：

, show: function () {の直後に追加：

  // 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
Eric