Хаки и Скрипты Next Generation CMS : Tooltips : Красивые , яркие всплывающие подсказки на CSS3

irbees2008 Опубликовано - 16 - апреля Tooltips

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

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

Код:

001.tooltip
002{
003  position: relative;
004  background: #eaeaea;
005  cursor: help;
006  display: inline-block;
007  text-decoration: none;
008  color: #222;
009  outline: none;
010}
011 
012.tooltip span
013{
014  visibility: hidden;
015  position: absolute; 
016  bottom: 30px;
017  left: 50%;
018  z-index: 999;
019  width: 230px;
020  margin-left: -127px;
021  padding: 10px;
022  border: 2px solid #ccc;
023  opacity: .9;
024  background-color: #ddd;                     
025  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
026  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
027  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
028  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
029  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
030  -moz-border-radius: 4px;
031  border-radius: 4px;  
032  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
033  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
034  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
035  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
036}
037 
038.tooltip:hover
039{
040  border: 0; /* IE6 fix */
041}
042 
043.tooltip:hover span
044{
045  visibility: visible;
046}
047 
048.tooltip span:before,
049.tooltip span:after
050{
051  content: "";
052  position: absolute;
053  z-index: 1000;
054  bottom: -7px;
055  left: 50%;
056  margin-left: -8px;  
057  border-top: 8px solid #ddd;
058  border-left: 8px solid transparent;
059  border-right: 8px solid transparent;        
060  border-bottom: 0;  
061}
062 
063.tooltip span:before
064{
065  border-top-color: #ccc;
066  bottom: -8px;
067}
068 
069/* Yellow */
070 
071.yellow-tooltip span
072{
073 
074  border-color: #e1ca82;
075  background-color: #ffeaa6;                     
076}
077 
078.yellow-tooltip span:after
079{ 
080  border-top-color: #ffeaa6;
081}
082 
083.yellow-tooltip span:before
084{
085  border-top-color: #e1ca82;
086}
087 
088/* Navy */
089 
090.navy-tooltip span
091{
092  color: #fff;
093  text-shadow: 0 1px 0 #000;  
094  border-color: #161a1f;
095  background-color: #1e2227;
096}
097 
098.navy-tooltip span:after
099{ 
100  border-top-color: #1e2227;
101}
102 
103.navy-tooltip span:before
104{
105  border-top-color: #161a1f;
106}
107 
108/* Blue */
109 
110.blue-tooltip span 
111{
112  border-color: #59add4;
113  background-color: #61bde7;
114}
115 
116.blue-tooltip span:after
117{ 
118  border-top-color: #61bde7;
119}
120 
121.blue-tooltip span:before
122{
123  border-top-color: #59add4;
124}
125 
126/* Pink */
127 
128.pink-tooltip span 
129{
130  border-color: #ce4378;
131  background-color: #ea4c88;
132}
133 
134.pink-tooltip span:after
135{ 
136  border-top-color: #ea4c88;
137}
138 
139.pink-tooltip span:before
140{
141  border-top-color: #ce4378;
142}

2.Где надо вывести подсказку добавляем class="tooltip" и заключаем в span фразу которую будем выводить в подсказке
ну типа так

Код:

`1`	`<a` `href="#"` `class="tooltip">vulputate<span><b>Optional title</b>`

`2`	`This is a gray CSS3 tooltip.</span></a>`

3.пример,скопируй и вставь в окно ниже

Код:

001<style>
002body
003{
004  color: #222;
005  font-family: 'Lucida sans', Arial, Helvetica;
006  width: 600px;
007  margin: 50px auto;
008  font-size: small;
009  line-height: 1.4;
010}
011 
012.tooltip
013{
014  position: relative;
015  background: #eaeaea;
016  cursor: help;
017  display: inline-block;
018  text-decoration: none;
019  color: #222;
020  outline: none;
021}
022 
023.tooltip span
024{
025  visibility: hidden;
026  position: absolute; 
027  bottom: 30px;
028  left: 50%;
029  z-index: 999;
030  width: 230px;
031  margin-left: -127px;
032  padding: 10px;
033  border: 2px solid #ccc;
034  opacity: .9;
035  background-color: #ddd;                     
036  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
037  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
038  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
039  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
040  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
041  -moz-border-radius: 4px;
042  border-radius: 4px;  
043  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
044  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
045  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
046  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
047}
048 
049.tooltip:hover
050{
051  border: 0; /* IE6 fix */
052}
053 
054.tooltip:hover span
055{
056  visibility: visible;
057}
058 
059.tooltip span:before,
060.tooltip span:after
061{
062  content: "";
063  position: absolute;
064  z-index: 1000;
065  bottom: -7px;
066  left: 50%;
067  margin-left: -8px;  
068  border-top: 8px solid #ddd;
069  border-left: 8px solid transparent;
070  border-right: 8px solid transparent;        
071  border-bottom: 0;  
072}
073 
074.tooltip span:before
075{
076  border-top-color: #ccc;
077  bottom: -8px;
078}
079 
080/* Yellow */
081 
082.yellow-tooltip span
083{
084 
085  border-color: #e1ca82;
086  background-color: #ffeaa6;                     
087}
088 
089.yellow-tooltip span:after
090{ 
091  border-top-color: #ffeaa6;
092}
093 
094.yellow-tooltip span:before
095{
096  border-top-color: #e1ca82;
097}
098 
099/* Navy */
100 
101.navy-tooltip span
102{
103  color: #fff;
104  text-shadow: 0 1px 0 #000;  
105  border-color: #161a1f;
106  background-color: #1e2227;
107}
108 
109.navy-tooltip span:after
110{ 
111  border-top-color: #1e2227;
112}
113 
114.navy-tooltip span:before
115{
116  border-top-color: #161a1f;
117}
118 
119/* Blue */
120 
121.blue-tooltip span 
122{
123  border-color: #59add4;
124  background-color: #61bde7;
125}
126 
127.blue-tooltip span:after
128{ 
129  border-top-color: #61bde7;
130}
131 
132.blue-tooltip span:before
133{
134  border-top-color: #59add4;
135}
136 
137/* Pink */
138 
139.pink-tooltip span 
140{
141  border-color: #ce4378;
142  background-color: #ea4c88;
143}
144 
145.pink-tooltip span:after
146{ 
147  border-top-color: #ea4c88;
148}
149 
150.pink-tooltip span:before
151{
152  border-top-color: #ce4378;
153}
154</style>
155 
156<style>
157#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;}
158body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
159body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;}
160body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 10px 0 0;}
161body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
162body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 11px;}
163body .one .bsa_it_p{display:none;}
164body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:9px;margin: -15px 0 0 0;text-align:right;}
165body .one .bsa_it_ad .bsa_it_d{font-size: 11px;}
166body .one{overflow: hidden}
167</style>
168 
169<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus nisi
170<a href="#" class="tooltip">vulputate<span><b>Optional title</b>
171This is a gray CSS3 tooltip.</span></a>
172nulla 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>
173 
174<h3>Yellow tooltip</h3>
175<p>Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, <a href="#" class="tooltip yellow-tooltip">velit<span><b>Optional title</b>
176This is a yellow CSS3 tooltip.</span></a>, nibh
177consequat 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. 
178 
179</p>
180 
181<h3>Navy tooltip</h3>
182Nulla volutpat mattis egestas. Integer a neque at lorem ornare <a href="#" class="tooltip navy-tooltip">accumsan<span><b>Optional title</b>
183This is a navy CSS3 tooltip.</span></a> quis quis ipsum.
184Nam 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>
185 
186<h3>Blue tooltip</h3>
187 
188<p>Nullam tristique, eros nec feugiat bibendum, orci velit commodo <a href="#" class="tooltip blue-tooltip">justo<span><b>Optional title</b>
189This is a blue CSS3 tooltip.</span></a>, non ornare odio massa et ipsum.
190Cras scelerisque <a href="#" class="tooltip blue-tooltip">ultrices<span>This is another blue tooltip made with CSS3 only.</span></a> leo congue laoreet.</p>
191 
192<h3>Pink tooltip</h3>
193<p>Etiam non malesuada nunc. Curabitur bibendum, sapien ornare placerat pellentesque, <a href="#" class="tooltip pink-tooltip">velit<span><b>Optional title</b>
194This is a pink CSS3 tooltip.</span></a>, nibh
195consequat 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. 
196 
197</p>

Можешь почитать и вот эту статейку "Меняем флеш облако тегов на canvas облако"

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

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