$(function() {

  // クリックでツールチップを非表示（１度だけ実行）
  $('.tooltip-click').on("click", function() {
    $(this).hideBalloon();
  }).showBalloon();

  // クリックでツールチップの表示・非表示を切り替える
  let toggleShown = false;
  $('.tooltip-toggle').on("click", function() {
    toggleShown ? $(this).hideBalloon() : $(this).showBalloon();
    toggleShown = !toggleShown;
  }).hideBalloon();

  // テキストフィールド入力中にツールチップを表示（バリデーション）
  $('.tooltip-istyping').on("keyup blur", function (e) {
    let errorMessage = "電話番号を入力してください";

     // 入力中の処理
     if (e.type == "keyup") {
       // エラーメッセージが変更になった時
       if ($(this)?.data("balloon")?.data('active')) {
        $(this).data("balloon").data('active', false);
        }
        // 数字以外が入力された時のエラーメッセージ
        if (isNaN(e.target.value)) {
          errorMessage = "半角数字で入力してください"
        }
        $(this).showBalloon({
          contents: errorMessage
        });
     }

     // 未入力、またはカーソルが外れた時
     if (e.type == "blur" || e.target.value == "") {
      $(this).hideBalloon();
     }
  }).hideBalloon();
});