VOVA_N | Дата: Пятница, 17.05.2013, 08:18 | Сообщение # 1 |
Майор
Группа: Администраторы
Сообщений: 86
Репутация: 4
Статус: Offline
| Задано несколько цветовых стилей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: 50px; left: 50%; z-index: 999; width: 100px; margin-left: -60px; 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: -8px; 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: -9px; }/* 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; } HTML для желтой цветовой схемы Код <a href="#" class="tooltip yellow-tooltip"><img src="адрес картинки"><span><b>Текст в окне</b></span></a> Т.е. все, что должно появляться в всплывающей подсказке, помещайте между span>
|
|
| |