Для реализации функциональности, где тултип открывается и закрывается при клике на чекбокс, а также закрывается при клике вне него, можно использовать подход с обработчиками событий. Вы можете столкнуться с проблемой, когда закрытие тултипа вызывает потерю фокуса с чекбокса, что приводит к неправильной работе кликов при последовательном взаимодействии.
Вот пример того, как можно реализовать такую функциональность:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tooltip</title>
<style>
.tooltip {
display: none;
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
.checkbox-container {
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<div class="checkbox-container">
<input type="checkbox" id="tooltip-toggler">
<label for="tooltip-toggler">Нажмите, чтобы показать тултип</label>
<div class="tooltip">Это тултип</div>
</div>
<script>
const checkbox = document.getElementById("tooltip-toggler");
const tooltip = document.querySelector(".tooltip");
checkbox.addEventListener("click", function(event) {
// Показываем или скрываем тултип в зависимости от состояния чекбокса
tooltip.style.display = checkbox.checked ? "block" : "none";
event.stopPropagation(); // Предотвращаем событие всплытия
});
// Закрываем тултип при клике вне него
document.addEventListener("click", function(event) {
const isClickInside = checkbox.parentElement.contains(event.target);
if (!isClickInside) {
checkbox.checked = false; // Сбрасываем чекбокс
tooltip.style.display = "none"; // Скрываем тултип
}
});
</script>
</body>
</html>
```
### Описание работы кода:
1. **HTML**: Мы создали чекбокс и соответствующий тултип с меткой.
2. **CSS**: Стили для тултипа, который скрывается по умолчанию.
3. **JavaScript**:
- Установили обработчик клика на чекбокс. При клике мы показываем или скрываем тултип в зависимости от состояния чекбокса.
- Используем `event.stopPropagation()` для предотвращения передачи события клика вверх, чтобы не вызвать закрытие тултипа сразу после открытия.
- Добавили обработчик события клика на документ. Если клик произошел вне контейнера с чекбоксом (включающим и сам тултип), мы сбрасываем состояние чекбокса и скрываем тултип.
Таким образом, пользователь сможет открывать и закрывать тултип, а также возвращаться к нему при новом клике по чекбоксу без необходимости дополнительных действий.