CSS 3.0 ToolTip без jQuery и JavaScript

css3-tooltip

Едноставен CSS ToolTip што користи само HTML5 и CSS 3.0. Работи во сите модерни прелистувачи и може да се користи на кој било елемент од DOM-от.

HTML Структура

Структурата, на пример, може да биде навигацијата на самата интернет страна како што е прикажано во примерот. Прво што треба да се напише е HTML5 структурата и елементите што ќе користат дополнително облаче (ToolTop).

<header>
<nav>
	<ul class="listless">
		<li><span class="tooltip">CSS 3.0</span><a href="#">Feel</a></li>
		<li><span class="tooltip">HTML5</span><a href="#">Free</a></li>
		<li><span class="tooltip">ToolTip</span><a href="#">To use</a></li>
		<li><span class="tooltip resized">No JavaSript</span><a href="#">This</a></li>
	</ul>
</nav>
</header>

CSS Структура

Прво во CSS треба да се наведат правилата за целиот DOM и стилот на основните елементи како body, h1, p, a, a:hover и a:focus.

header, section, footer, aside, nav, article, figure { display: block; }

body {
    background-color: #fff;
    color: #323232;
    font-size: 1em; 
    font-family:'Lucida Grande', 'Droid Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    text-align: center;
}

h1 { margin:0; }

p { 
	color:#6181a7; 
	font-size:0.8em; 
	line-height:2; 
}

a   {           
	color:#6e6e6e;
	display:block;
    font-family:'Lucida Grande', 'Droid Sans', sans-serif;
    font-size:1em;
	font-style:italic;
	font-weight:normal;
	padding:15px 0;
	text-decoration:none;
}

a:hover, a:focus { 
	color:#fff; 
	background-color:#0b121f; 
	text-decoration:none; 
}

ul { 
	margin:0; 
	padding:0; 
	list-style:none; 
} 

ul li {	
	-moz-box-shadow:0 1px 3px silver;
	-webkit-box-shadow:0 1px 3px silver;
	box-shadow:0 1px 3px silver;    
	float:left;
	margin-bottom:30px;
    position:relative;
    width:25%;
}

header {
	background:white;
	height:170px;
	margin:92px auto 0;
	width:320px;
}

Кога тоа е наведено тогаш се пишуваат правилата за ToolTip облачето како што е неговата големина, бојата на текстот и визуелниот изглед. На крај се додава подкласата :after каде што се наведени правилата за стрелката на балончето.

.tooltip { 
	background:#252d33;
	background:-webkit-gradient(linear, left top, left bottom, from(#374e5e), to(#252d33));
	background:-webkit-linear-gradient(#374e5e, #252d33);
	background:-moz-linear-gradient(center top, #374e5e 0%, #252d33 100%);
	background:-moz-gradient(center top, #374e5e 0%, #252d33 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#374e5e,endColorstr=#252d33);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#374e5e, endColorstr=#252d33)";
	border:1px solid #1d2a3c;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	-moz-box-shadow:0 2px 2px #0e1b2f, 0 0 2px #475c6b inset; -webkit-box-shadow:0 2px 2px #0e1b2f, 0 0 2px #475c6b inset; box-shadow:0 2px 2px #0e1b2f, 0 0 2px #475c6b inset; 
	color:#fff;
	opacity:0;
	font-size:0.8em;
	position:absolute;
	padding:8px 16px;
	right:0;
	top:-55%;
	-moz-transition: opacity 0.2s ease-in, top 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in, top 0.2s ease-in;
	transition: opacity 0.2s ease-in, top 0.2s ease-in;
} 

.tooltip.resized {
	width:120px;
}

.tooltip:after {
	border-color:#252d33 transparent transparent; 
	border-style:solid;
	border-width:10px; 
	right:28px;
    content:"";
    position:absolute;
    top:92%;
}

ul li:hover .tooltip { 
	opacity:1; 
	top:-90%; 
}

За стрелката ја користев техниката на четири страна контура каде што трите бои на контурата се невидливи, а (избраната страна) е всушност стреклата, како основната боја на облачето. На тој начин се добива илузијата дека стрелката е директно продолжение од облачето.

Анимацијата е направена со користењето на правилото transition врз opacity и top позицијата. Со :hover се повикува top позицијата да се помести од пасивната позиција на облачето, а невидливоста станува opacity:1 (целосно видливо).

preview-css3-tooltip

Прегледај или преземи

Се надевам дека ви се допадна овој начин на креирање помошно облаче што може да биде комплетно напишано со HTML и CSS, нема користење на слики и целосно ќе функционира според споствен визуелен изглед.

gravatar
Автор: Капсаров Благој
За авторот: Од сите сплетки и досетки се обидувам да инспирирам доволен број на луѓе што сакаат да го користат мозокот за креативен и позитивен развој. Мотото го позајмив од Рене Декарт: Cogito ergo sum! повеќе...

Comments are closed.