JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<a class="hoverlink" href="#">
    <div>Поводи по мне</div>
    <p>Подскажите пожалуйста... Такая ситуация, при наведении на ссылку показывается текст в виде всплывающей подсказки сделанной на CSS. Но когда курсор мыши находится за пределами ссылки, то она исчезает.. Вопрос: как сделать на CSS, так что бы подсказка скрывалась только тогда когда нажму на любое место за пределами подсказки... Спасибо...</p>
</a>

CSS

* {
	margin:0;
	padding:0;
}
.hoverlink {
	display:block;
	position:relative;
	text-decoration:none;
	text-align:center;
	line-height:50px;
}
.hoverlink div {
	background:#c00;
	color:#fff;
	width:300px;
	height:50px;
	position:relative;
}
.hoverlink p {
	position:absolute;
	top:50px;
	left:0;
	background:#eee;
	width:260px;
	display:none;
	text-align:left;
	padding:20px;
	color:#444;
	line-height:25px;
}
.hoverlink:hover p {
	display:block;
}