Блог за wordpress, дизайн, SEO, технологии

Leo Creative Design

CSS Tooltip

CSS Tooltip

Как да си направим CSS tooltip???

В много случаи от практиката се налага, да бъдат използвани подсказки за посетителите на сайт, документи под HTML формат и въобще във всеки софтуерен продукт. С цел пояснение, напомняне и др.

В този пост ще покажа как най – просто може да стане това, в един HTML документ, единственно, чрез използване на CSS декларации и HTML.

CSS дава възможности да се позиционират елементи реалтивно и абсолютно по HTML-а. Използването на тези възможности, предава гъвкавост. Много често използването на реалтивните позиции и абсолютните позиции на елементи се използват заедно. Има някои особенности при тяхното използване, които е добре да се знаят преди да се избере и подходи към използването на тези стилови свойства.

Добре е да се знае, че при изпозване на абсолютни елементи, върху релативни контейнери, стойностите за позициониране, започват спрямо родителските, т.е отместванията са спрямо родителския релативен контейнер. В противен случай позиционирането е спрямо документа. Това е удобно за точното позициониране на абсолютните елементи, за всеки браузър и за различните резолюции на монитора.

default.css

body {
padding: 0;
margin: 0;
background: #000000;
color: #ffffff;
font-family: “Trebuchet MS”,Helvetica,Jamrul,sans-serif;
}

p {
margin: 0;
padding: 0;
}

#wrapper {
width: 980px;
margin: 0 auto;
}

#header, #footer {
padding: 40px;
}

#content {
padding: 20px;
overflow: hidden;
}

.main_container {
width: 100%;
}

#content .tooltip_container {
position: relative;
padding: 5px;
float: left;
margin-right: 10px;
width: 290px;
background-color:#2229FF;
}

#content .tooltip_container .tooltip {
display: none;
width: 200px;
padding: 5px;
background: #FFF47B;
font-size: 10px;
position: absolute;
top: -20px;
left: 0px;
color: #000;
border: 1px solid #0000000;
z-index: 50;
}

#content .tooltip_container:hover .tooltip {
display: block;
}

index.html

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />

<title>CSS tooltip</title>

<!– css files –>
<link rel=”stylesheet” type=”text/css” href=”./css/default.css” />

</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<h1>Как да си направим CSS tooltip?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id=”content”>
<h2>Започваме…</h2>
<div>
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, mauris ut facilisis porttitor, est tortor mattis metus, eu lobortis turpis urna ut risus. Vestibulum nec orci lorem. Nullam posuere lobortis augue a malesuada. Etiam enim lacus, ornare quis iaculis vel, iaculis sit amet nulla. Sed nulla ante, sodales et euismod vitae, hendrerit vitae ligula. Morbi id lacus a elit fermentum ultricies imperdiet sit amet nunc. Morbi nec purus vitae felis faucibus lobortis eget id mi. Donec facilisis pharetra lectus, at tempus leo fringilla ac. Aenean vulputate purus id turpis bibendum sodales. Sed feugiat, risus a pulvinar vehicula, metus arcu commodo tortor, sed hendrerit tortor nunc eget tellus.</p>
<div>Това е подсказка за Блок 1.</div>
</div>
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, mauris ut facilisis porttitor, est tortor mattis metus, eu lobortis turpis urna ut risus. Vestibulum nec orci lorem. Nullam posuere lobortis augue a malesuada. Etiam enim lacus, ornare quis iaculis vel, iaculis sit amet nulla. Sed nulla ante, sodales et euismod vitae, hendrerit vitae ligula. Morbi id lacus a elit fermentum ultricies imperdiet sit amet nunc. Morbi nec purus vitae felis faucibus lobortis eget id mi. Donec facilisis pharetra lectus, at tempus leo fringilla ac. Aenean vulputate purus id turpis bibendum sodales. Sed feugiat, risus a pulvinar vehicula, metus arcu commodo tortor, sed hendrerit tortor nunc eget tellus.</p>
<div>Това е подсказка за Блок 2.<br />Още един ред към този tooltip</div>
</div>
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, mauris ut facilisis porttitor, est tortor mattis metus, eu lobortis turpis urna ut risus. Vestibulum nec orci lorem. Nullam posuere lobortis augue a malesuada. Etiam enim lacus, ornare quis iaculis vel, iaculis sit amet nulla. Sed nulla ante, sodales et euismod vitae, hendrerit vitae ligula. Morbi id lacus a elit fermentum ultricies imperdiet sit amet nunc. Morbi nec purus vitae felis faucibus lobortis eget id mi. Donec facilisis pharetra lectus, at tempus leo fringilla ac. Aenean vulputate purus id turpis bibendum sodales. Sed feugiat, risus a pulvinar vehicula, metus arcu commodo tortor, sed hendrerit tortor nunc eget tellus.</p>
<div>Това е подсказка за Блок 3.</div>
</div>
</div>
</div>
<!– /#content –>
<div id=”footer”></div>
</div>
<!– /#wrapper –>
</body>
</html>

Дано този код ви е полезен