Все владельцы сайтов стремятся сделать свои проекты уникальным в дизайне. Дизайн должен быть легким и не нагружать страницы вашего сайта, для это есть масса красивых штучек, одну из которых я вам распишу ниже как установить и настроить под дизайн своего проекта.
Ну приступим

Чтобы подсказка появлялся в ссылке используется не совсем стандартный вариант, как правило все подсказки построены на теге alt или title в нашем случае этот тип не используется так как необходимо накладывать несколько стилей для вывода класса стиля, используется в ссылке class="cursorhelp blue-cursorhelp" где cursorhelp - это окно blue-cursorhelp - это цветность окна
1.Сам вид ссылки

 <a href="http://ucozua.ru/index/podskazka_primer_skripta/0-395" class="cursorhelp blue-cursorhelp">Наведите курсором на ссылку<span>Наведите курсором на ссылку<br>Подсказка для ngcmshak.ru<br>вставляем текст</span></a>

2.Теперь для этой ссылки выбираем цвет стиля и вставляйте его в таблицу стилей
Серый цвет подсказки подсказки:

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

  .cursorhelp 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);  
  }  

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

  .cursorhelp:hover span  
  {  
  visibility: visible;  
  }  

  .cursorhelp span:before,  
  .cursorhelp 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;  
  }  

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

  /* Color red*/  

  .blue-cursorhelp span  
  {  
  border-color: #ff0000;  
  background-color: #ff3300;  
  }  

  .blue-cursorhelp span:after  
  {  
  border-top-color: #ff3300;  
  }  

  .blue-cursorhelp span:before  
  {  
  border-top-color: #ff0000;  
  }

Зеленый цвет подсказки подсказки:
Код: Выделить всё

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

  .cursorhelp 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);  
  }  

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

  .cursorhelp:hover span  
  {  
  visibility: visible;  
  }  

  .cursorhelp span:before,  
  .cursorhelp 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;  
  }  

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

  /* Color red*/  

  .blue-cursorhelp span  
  {  
  border-color: #ff0000;  
  background-color: #ff3300;  
  }  

  .blue-cursorhelp span:after  
  {  
  border-top-color: #ff3300;  
  }  

  .blue-cursorhelp span:before  
  {  
  border-top-color: #ff0000;  
  }

Красный цвет подсказки подсказки:

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

  .cursorhelp 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);  
  }  

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

  .cursorhelp:hover span  
  {  
  visibility: visible;  
  }  

  .cursorhelp span:before,  
  .cursorhelp 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;  
  }  

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

  /* Color zeleni*/  

  .blue-cursorhelp span  
  {  
  border-color: #00ff00;  
  background-color: #00FF00;  
  }  

  .blue-cursorhelp span:after  
  {  
  border-top-color: #00FF00;  
  }  

  .blue-cursorhelp span:before  
  {  
  border-top-color: #00FF00;  
  }

Желтый цвет подсказки подсказки: 

Код: Выделить всё
.cursorhelp  
  {  
  position: relative;  
  cursor: help;  
  display: inline-block;  
  text-decoration: none;  
  color: #222;  
  outline: none;  
  }  

  .cursorhelp 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);  
  }  

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

  .cursorhelp:hover span  
  {  
  visibility: visible;  
  }  

  .cursorhelp span:before,  
  .cursorhelp 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;  
  }  

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

  /* Color galban*/  

  .blue-cursorhelp span  
  {  
  border-color: #FFFF00;  
  background-color: #FFFF66;  
  }  

  .blue-cursorhelp span:after  
  {  
  border-top-color: #FFFF66;  
  }  

  .blue-cursorhelp span:before  
  {  
  border-top-color: #FFFF00;  
  }

Синий цвет подсказки подсказки:

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

  .cursorhelp 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);  
  }  

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

  .cursorhelp:hover span  
  {  
  visibility: visible;  
  }  

  .cursorhelp span:before,  
  .cursorhelp 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;  
  }  

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

  /* Color bluue*/  

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

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

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

Вся настройка цвета окошка происходит во вторичном стиле к примеру как в последнем стиле светло синем
Вот вам 4 настройки:
1 Цвет бордюра
2 Цвет фона
3 Цвет бордюра уголка стрелки
4 Цвет бордюра верха тени

 /* Color bluue*/  

  .blue-cursorhelp span  
  {  
  border-color: #59add4; /*Цвет бордюра*/  
  background-color: #61bde7; /*Цвет фона*/  
  }  

  .blue-cursorhelp span:after  
  {  
  border-top-color: #61bde7; /*Цвет бордюра уголка стрелки*/  
  }  

  .blue-cursorhelp span:before  
  {  
  border-top-color: #59add4; /*Цвет бордюра верха тени*/  
  }

Для наших клиентов из авиакомпании S7 мы выпускаем новую версию дизайна для портала «Виртуальный менеджер продаж» (вот здесь мы рассказывали о том, как мигрировали его на SharePoint 2010). Обновление коснулось не только дизайна, но и кое-какого функционала. Например, одним из таких новшеств стало появление Help-тура для новых пользователей.



Читать дальше →

День добрый,
На момент написания поста существуют тысяча и один способ создания тултипов. Через css3, используя js и jquery, или к примеру анимированные тултипы. А вот вообще генератор этих прямоугольников со стрелочками через всевозможные псевдо элементы. На ваше обозрение хотелось бы предложить ещё один подход к созданию тултипов, но уже в SVG. Итак с новыми извращениями мыслями приступаем к делу.
Подробности тут