• 1946
  • 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Красивые , яркие всплывающие подсказки на CSS3
1.в css добавляем

Код:
.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

/* Yellow */

.yellow-tooltip span
{

border-color: #e1ca82;
background-color: #ffeaa6;
}

.yellow-tooltip span:after
{
border-top-color: #ffeaa6;
}

.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}

/* Navy */

.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;
border-color: #161a1f;
background-color: #1e2227;
}

.navy-tooltip span:after
{
border-top-color: #1e2227;
}

.navy-tooltip span:before
{
border-top-color: #161a1f;
}

/* Blue */

.blue-tooltip span
{
border-color: #59add4;
background-color: #61bde7;
}

.blue-tooltip span:after
{
border-top-color: #61bde7;
}

.blue-tooltip span:before
{
border-top-color: #59add4;
}

/* Pink */

.pink-tooltip span
{
border-color: #ce4378;
background-color: #ea4c88;
}

.pink-tooltip span:after
{
border-top-color: #ea4c88;
}

.pink-tooltip span:before
{
border-top-color: #ce4378;
}
2.Где надо вывести подсказку добавляем class="tooltip" и заключаем в span фразу которую будем выводить в подсказке
ну типа так
Код:
<a href="#" class="tooltip">vulputate<span><b>Optional title</b>
This is a gray CSS3 tooltip.</span></a>
3.пример,скопируй и вставь в окно ниже
Код:
<style>
body
{
color: #222;
font-family: 'Lucida sans', Arial, Helvetica;
width: 600px;
margin: 50px auto;
font-size: small;
line-height: 1.4;
}

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

/* Yellow */

.yellow-tooltip span
{

border-color: #e1ca82;
background-color: #ffeaa6;
}

.yellow-tooltip span:after
{
border-top-color: #ffeaa6;
}

.yellow-tooltip span:before
{
border-top-color: #e1ca82;
}

/* Navy */

.navy-tooltip span
{
color: #fff;
text-shadow: 0 1px 0 #000;
border-color: #161a1f;
background-color: #1e2227;
}

.navy-tooltip span:after
{
border-top-color: #1e2227;
}

.navy-tooltip span:before
{
border-top-color: #161a1f;
}

/* Blue */

.blue-tooltip span
{
border-color: #59add4;
background-color: #61bde7;
}

.blue-tooltip span:after
{
border-top-color: #61bde7;
}

.blue-tooltip span:before
{
border-top-color: #59add4;
}

/* Pink */

.pink-tooltip span
{
border-color: #ce4378;
background-color: #ea4c88;
}

.pink-tooltip span:after
{
border-top-color: #ea4c88;
}

.pink-tooltip span:before
{
border-top-color: #ce4378;
}
</style>

<style>
#adpacks-wrapper{font-family: Arial, Helvetica;width:280px;position: fixed;_position:absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 10px;-moz-box-shadow: 0 0 15px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;}
body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 10px 0 0;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 11px;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:9px;margin: -15px 0 0 0;text-align:right;}
body .one .bsa_it_ad .bsa_it_d{font-size: 11px;}
body .one{overflow: hidden}
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus nisi
<a href="#" class="tooltip">vulputate<span><b>Optional title</b>
This is a gray CSS3 tooltip.</span></a>
nulla pretium egestas. Aliquam pretium eros congue <a href="#" class="tooltip">ultrices<span>This is another gray tooltip made with CSS3 only.</span></a> mauris auctor lobortis.</p>

<h3>Yellow tooltip</h3>
<p>Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, <a href="#" class="tooltip yellow-tooltip">velit<span><b>Optional title</b>
This is a yellow CSS3 tooltip.</span></a>, nibh
consequat nulla, ac laoreet <a href="#" class="tooltip yellow-tooltip">justo<span>This is another yellow tooltip made with CSS3 only.</span></a> lacus lectus ac enim.

</p>

<h3>Navy tooltip</h3>
Nulla volutpat mattis egestas. Integer a neque at lorem ornare <a href="#" class="tooltip navy-tooltip">accumsan<span><b>Optional title</b>
This is a navy CSS3 tooltip.</span></a> quis quis ipsum.
Nam id erat mi. Etiam <a href="#" class="tooltip navy-tooltip">semper<span>This is another navy tooltip made with CSS3 only.</span></a> velit non risus ultricies faucibus.</p>

<h3>Blue tooltip</h3>

<p>Nullam tristique, eros nec feugiat bibendum, orci velit commodo <a href="#" class="tooltip blue-tooltip">justo<span><b>Optional title</b>
This is a blue CSS3 tooltip.</span></a>, non ornare odio massa et ipsum.
Cras scelerisque <a href="#" class="tooltip blue-tooltip">ultrices<span>This is another blue tooltip made with CSS3 only.</span></a> leo congue laoreet.</p>

<h3>Pink tooltip</h3>
<p>Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, <a href="#" class="tooltip pink-tooltip">velit<span><b>Optional title</b>
This is a pink CSS3 tooltip.</span></a>, nibh
consequat nulla, ac laoreet <a href="#" class="tooltip pink-tooltip">justo<span>This is another pink tooltip made with CSS3 only.</span></a> lacus lectus ac enim.

</p>

Можешь почитать и вот эту статейку "Сервис социального замка,социальных кнопок и плюшек для вашего сайта."

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

----