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


    

Info 1

Info 2

Егер ол пайдаланушы шеберін көрсету үшін түймешікті нұқыған кезде, DOM-ке келесі белгілеу қосылады.

<div class="tooltip"</div>
27
HTML-ті де орналастыра аласыз ба?
қосылды автор ZimSystem, көзі
сіздің сұрағыңызға жауап бере алмайсыз ба? тінтуірдің қалдырылуында құралдар тақтасы жоғалып кетеді
қосылды автор 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();
});

Осындай техниканы осы СО айналымда жабу үшін ұсынылады:

Қалай мүмкін Мен Twitter-дегі Bootstrap popover-ты кез-келген жерден (басқа) басу арқылы жаба аламын?

47
қосылды
Бұл өте жақсы! Рахмет!
қосылды автор Abdo, көзі
Бұл жауап болуы керек.
қосылды автор Paul, көзі
Өкінішке орай, бұл hover және нұқу екеуін де триггер ретінде пайдалану кезінде кейбір қиындықтар туындады.
қосылды автор dude, көзі
Бұл гений және жаңа қабылданған жауап болуы керек! Рахмет!
қосылды автор Alveoli, көзі
Мен іздеп жүрген нәрсе. $ ('. tooltip'). tooltip ('жасыру'); жұмыс істемеді, бірақ $ ('. tooltip') емес. (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, ол 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-да жақсы пайдаланушы тәжірибесін жасайды: Құрал тақтасын көру үшін элементті басыңыз. Ол кетіп қалған құрал-жабдықты басыңыз.

2
қосылды

Мен бұл мәселені шешуді іздедім және $ ('. Tooltip') деп ойлаймын.hide (); кез-келген жүктеу жолын айналып өтеді show , көрсетілетін , hide немесе hidden оқиғалары. Кейбір ойлардан кейін, мен келесі кодты қоса тіркелген оқиғалардың бірқатарын өңдеуге мүмкіндік бердім.

Ескерту: Firefox және хромда тек сыналған, бірақ теориялық жағынан жақсы жұмыс істеу керек.

<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() орнына remove ()

1
қосылды
remove() - әсіресе егер динамикалық түрде ауыстырылған элементте құралдар тақтасын құтқаруға тырыссаңыз жақсы.
қосылды автор kjdion84, көзі

Рахмет Йохен «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
қосылды