UIkit 3 Event не работает

Question

Я пытался добавить всплывающую подсказку к кнопке, которая отображается только при соблюдении определенных условий. Я использую uikit@3.0.0-beta.35. Согласно документации, я должен вернуть false на beforeshow событие.

UIkit.tooltip($element, { pos: 'top' });

$element.on('beforeshow', function(){
  return false;
});

if(condition){
 UIkit.tooltip($element).show();
}

Проблема в том, что beforeshow функция никогда не срабатывает по какой-то причине. Я даже попробовал этот синтаксис, упомянутый в документации UIkit:

UIkit.util.on($element, 'beforeshow', function () {
  return false;
});

К сожалению, ни один из этих методов не работал для меня.

Answer 1

В документах есть какая-то ошибка, у Switcher такая же проблема. событие вызвано document не target, Вы можете использовать этот синтаксис следующим образом:

UIkit.util.on(document, 'event', '#target-id', callback)

документы давно меня смущали:(

Answer 2

Проблема с вашим кодом заключается в том, что вы пытаетесь прослушать событие непосредственно в элементе, в то время как событие инициируется в документе - в документации есть ошибка, так как говорят, что это срабатывает на элементе, но это не.

Существует также свежий ложный отчет об этой ошибке

var $element = $('#hoverButton');
var $check = $('#tooltipToggle');

UIkit.tooltip($element);

$(document).on('beforeshow', $element, function() {
  if (!$check.prop('checked')) return false;
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>

<div class="uk-position-center">
  <label>show tooltip <input id="tooltipToggle" class="uk-checkbox" type="checkbox"></label><br><br>
  <button id="hoverButton" class="uk-button uk-button-default" title="Hello World">Hover</button>
</div>

Answer 3

Для коммутатора:

      $(document).on('show', $('#switcherId'), function(){
    console.log('fired');
});

Возможно, мне понадобится этот ответ и в будущем ...