Пример простого tooltip окна

01.03.2018

Промер создания и оформления простого тултипа на CSS

pic1

Тултип всплывает при наведении на элемент.

 
.delivery .tooltip {
    position: relative;
    display: inline-block;
}

.delivery .tooltip .tooltiptext {
	white-space: normal;
	visibility: hidden;
	width: 220px;
	background-color: white;
	color: #000;
	text-align: center;
	border-radius: 6px;
	/*padding: 5px 10px;*/
	border: 1px solid #038aec;
	padding: 10px;
	position: absolute;
	z-index: 1;
	left: -123px;
	font-size: 13px;
}

.delivery .tooltip:hover .tooltiptext {
    visibility: visible;
}

 
<div class="delivery">

<span class="tooltip">
	<span>возможна</span><i class="tip fa fa-question-circle"></i><br />

	<div class="tooltiptext">
		Возможность <b>срочной доставки</b> зависит от наличия свободных водителей. <br>
	</div>
</span>

</div>


Категории: HTML, CSS
Пометки: тултип, всплывающая подсказка
Яндекс.Метрика