JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

<script src="https://cdn.rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/min/jquery.inputmask.bundle.min.js"></script>
<p class="obertka_tool hidden namb-pass_tool"><span class="tool birth_certificate" data-toll=""><i class="txt_none">.</i></span></p>
 <input id="aaa" type="text" class="form-control" data-inputmask="'regex': '[IVXivx]+[А-Яа-я]{2}\\d{6}'">

CSS

.obertka_tool{
    position: absolute;
    margin-left:0px;
    margin-top:88px;
    z-index: 100;
}
.tool{
    position: relative;
    font-family: serif;
    color: rgba(0,0,0,0);
    pointer-events: none;
    opacity:0.8;

}
.tool:before,
.tool:after{
    position: absolute;
    opacity: 1;
}
.tool:before{
    border-style: solid;
    border-width:6px 10px 0 10px;
    border-color:#000 transparent transparent transparent;
    content:"";
    margin-left:100px;
    top:0px;
}
.tool:after{
    font-family: "Roboto", "Open Sans", sans-serif;
    background:#000;
    border-radius: 3px;
    bottom:100%;
    color:#edeff0;
    content: attr(data-toll);
    margin-left: 67px;
    padding:10px;
    width:134px;
    text-align: center;
    white-space: normal;
}
.txt_none{
    display: none;
}
.form-control{
  margin-top: 100px;
  }
 
}

JavaScript

var $tooltip = $('.birth_certificate')

$('input').inputmask().on('input focus keypress', function() {
  var val = $(this).val();

  if (/^[ivx]{1,99}[а-я]{2}\d{6}$/i.test(val)) {
    $tooltip.attr('data-toll','')
  } else if (/^[ivx]+[а-я]{2}/i.test(val)) {
    $tooltip.attr('data-toll','арабские цифры')
  } else if (/^([ivx]{99})|([ivx]{1,99}[а-я])/i.test(val)) {
    $tooltip.attr('data-toll','русские буквы')
  } else if (/^[ivx]/i.test(val)) {
    $tooltip.attr('data-toll','римские цифры или русские буквы')
  } else {
    $tooltip.attr('data-toll','римские цифры')
  }
});