Как создать подсказки

let psw = document.querySelector('#psw'); 
let pswCheck = document.querySelector('#psw-check'); 
pswCheck.addEventListener('change', () => { 
  if (psw.value !== pswCheck.value) { 
    document.querySelector('.error').textContent = 'Ошибка! Пароли не совпадают!'; 
  } 
})

.error { 
  color: #ff0000; 
}

<input type="password" id="psw"> 
<input type="password" id="psw-check"> 
<div class="error"></div>

1) Само это поле с подсказкой (красным цветом или еще каким), в html прописать с аттрибутом hidden. Таким образом, пока поле пароля не будут трогать, подсказка будет невидимой. Предположим, мы задали ему id = 'popup' 2) Если, к примеру, использовать jquery (да и не только с ним), можно написать функцию, которая при событии change на поле пароля, будет выполнять проверку, и делать видимым ( $('#popup').show()) поле с id = popup. Как только введут неверный пароль, она покажется. Кстати, чтобы показалась красиво, можно вместо show() прописать fadeIn().

P.S. Можно также в css прописать красивые аттрибуты для класса всплывающей подсказки (назовем для примера 'popup_on', а также прописать единственный аттрибут 'display: none;' для класса скрытой подсказки ('popup_off'). И при событии change менять эти классы.

Для валидации в HTML есть хороший инструмент - required.