【Web】UIKitでTooltipの表示/非表示をコントロールしたい

Question

UIKitを使ってユーザー登録画面を作成しています。

パスワードのバリデーションについて、必要に応じてinput type="password"の要素に対してtooltipで警告（そのパスワードが使えない理由）について警告するUIを作成しています。

UIkit.tooltip(password_element, {title:password_incorrect_reason})

これで、パスワードが条件を満たしていないときにTooltipが表示されます。

しかし、パスワードが条件を満たしている時はTooltipを非表示にする必要があります。

公式のドキュメントを見る限り、以下のコードでTooltipを非表示にできるように思います。

UIkit.util.on(document, 'beforehide', '.uk-tooltip.uk-active', function(e) {
  if(is_password_correct){
    e.preventDefault();
    console.log("Tooltipは非表示");
  }
});

しかし実際は、Tooltipは非表示は出力されますがe.preventDefault();は書き方を間違えているのかTooltipが表示されてしまいます。

ご教授のほど、よろしくお願いします。

---

追記:
preventService()での止め方はわからなかったものの、表示/非表示だけなら余計なことを考えず属性の操作をするのが手っ取り早かったです。

//表示
password_element.setAttribute('uk-tooltip','title:'+password_incorrect_reason)
//非表示
password_element.removeAttribute('uk-tooltip')

しかしpreventService()の使い方は依然としてわからないので、回答は募集したままにします。

Answer 1

Githubの方にissueとして登録したところ、やっぱりバグだったようです。次のバージョンではおそらく修正済みなので、解決と致します。

https://github.com/uikit/uikit/issues/4149

Answer 2

ツールチップが表示される前なので beforehide ではなく beforeshow でしょう。
ただ、preventDefault() を呼んでも変化がありませんでした。バグなのかドキュメントのほうに不備があるのかわかりません。
表示/非表示 は属性を書き換えてもいいですが、用意されているメソッドを呼んだほうがいいかもしれません。

  UIkit.tooltip(password_element).hide();

https://getuikit.com/docs/tooltip#hide

Comments

[tsurugi]

回答ありがとうございます。beforehideではなく beforeshow ですね。こっちに写す時になぜか間違えてました……。

入力に合わせてエラー内容を逐次再表示したいのですが、`.hide();`　で非表示にすると、今度はなぜか `.show()` で再表示できないんですよね…。

わざわざ確認してくださってありがとうございました。

[x_x]

こちらでは表示できますね。
show() も不要で単にフォーカスするだけなので、属性値を書き換えていないか確認してみてください。