Как заставить tippyjs работать как поле ошибки проверки - PullRequest
Новая
       38

Как заставить tippyjs работать как поле ошибки проверки

0 голосов
/ 18 декабря 2018

Я хотел сделать tippyjs, чтобы отобразить error message и скрыть их программно

Проблема, с которой я столкнулся сейчас: в hover это showing и hiding, я хочу скрыть это программно

Вопрос: как отобразить error сообщение

Демонстрация: https://codepen.io/anon/pen/JwRrxK?editors=1010

function validateIndianMobile(el){
     var btn = document.querySelector('#mobilenumber');
      tippy(btn);
  
    var str = el.value;
    var patt = new RegExp(/^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[789]\d{9}|(\d[ -]?){10}\d$/);
    var res = patt.test(str);
    if(!res) {
      $(el).css('border','1px solid red');
       btn._tippy.show();
    }else{
      $(el).css('border','  ');
        btn._tippy.hide();
    }
}

$(function(){
   tippy('#mobilenumber', {
    content: "Error Message Invalid Mobile Number",
    delay: 100,
    arrow: true,
    arrowType: 'round',
    size: 'large',
    duration: 500,
    animation: 'scale',
    trigger:'manual'
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.min.js"></script>
<input autocomplete="off" type="text"  id="mobilenumber" onkeyup="validateIndianMobile(this);">

Пожалуйста, помогите мне заранее спасибо

...