JSFiddle - React, Tailwind, and code Playground

HTML

<p class="obertka_tool hidden namb-pass_tool"><span class="tool birth_certificate" data-toll=""><i class="txt_none">.</i></span></p>
 <input class="form-control"type="text value="">

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.error:before{
    border-style: solid;
    border-width:6px 10px 0 10px;
    border-color:#000 transparent transparent transparent;
    content:"";
    margin-left:100px;
    top:0px;
}
.tool.error:after{
    font-family: "Roboto", "Open Sans", sans-serif;
    background:#000;
    border-radius: 3px;
    bottom:100%;
    color:#edeff0;
    content: 'А правильный формат здесь такой - римские цифры, затем две русские буквы, да ещё шесть арабских цифр';
    margin-left: 67px;
    padding:10px;
    width:250px;
    text-align: center;
    white-space: normal;
}
.txt_none{
    display: none;
}
.form-control{
  margin-top: 100px;
  }
 
}

JavaScript

var certificateInput = $('.form-control');
var certificateTooltip = $('.birth_certificate');

certificateInput.on('input', function(evt){
  certificateTooltip.toggleClass('error', !/^[IVXivx]+[А-Яа-я]{2}\d{6}$/.test(this.value))
})