Как реализовать лучше подсказки для инпутов и как лучше реализовать закрытие окна на js?

Question

[Masonry]

Здравствуйте. Есть таких два вопроса:

1 вопрос) Есть такая верстка invizmachine.esy.es/templatemonster/ по клику на кнопку 'Sign Up' появляется окно. Нужно сделать всплывающие подсказки у инпутов так как на этом изображении, которое я прикрепил.
я не пойму как сделать чтобы ширина у этих подсказок, сама подстраивалась, в зависимости от того сколько в них текста. у меня сейчас там все они одинакового размера, но нужно сделать чтобы были разные, как на изображении.

2 вопрос) Как мне это лучше реализовать на чистом js, чтобы кликая вне выпадающего блока 'sign-up__dropdown' он закрывался. На jquery это не составляло труда, а вот на чистом js все никак не могу додумать как это сделать. именно с реализацией проблемы.

Буду очень благодарен если поможете.

Answer 1

[Dark Hole]

1. Подсказка - это span с абсолютным/релативным позиционированием по правому краю.
2. Я решаю такую задачу двумя обработчиками событий - глобальным(на window или document) и локальным(на элементе, который должен активироваться-деактивироваться) - и общим для обаботчиков логическим переключателем-переменной. При клике в элементе, сначала активируется локальный обработчик, который ставит логический переключатель в другое положение(в простом случае, присваивает true). Затем активируется глобальный обработчик, который проверяет изменение состояния логического переключателя. Если он изменился - значит был клик внутри элемента, в таком случае он сбрасывает выключатель и ничего не делает. Если не изменился - то клик был вне элемента, надо деактивировать элемент.
Замечу, что подбных эффектов можно добиться с помощью стилизации тэга select или использовать стилизированый тэг button с нативными событиями получения и потери фокуса.
P.S. Чета я документации перечитал :D

Comments

[Masonry]

Подсказки ж должны быть по левому краю, посмотрите на верстку. мне нужно чтобы всегда они были по левому краю, не смотря на то сколько в них текста, поэтому я сделал right: 100% блоку 'error-message', чтобы всегда он был слева. но вот мне надо еще понять, как сделать чтобы они сами растягивались, в зависимости от того сколько в них текста.

[Masonry]

Dark Hole я вижу только одно решение, это задать им white-space: nowrap, но не знаю насколько это будет правильно.

[Dark Hole]

Masonry: нет, вы не поняли.

[Dark Hole]

Masonry: https://jsfiddle.net/d4w7voh3/3/