Красивый хинт с использованием Jquery

В этой статье я расскажу, как сделать хинт, как на скрине с красивым эффектом \”всплывания\”. Читаем…Итак. С самого начала рассмотрим плюсы и минусы этого дополнения…

Плюсы:
1. В отличие от прошлого хинта, этот начинает прорисовываться до полной загрузки страницы. Как помните, прошлый начинал работать после полной загрузки страницы…
2. Красиво всплывает.
3.Настраиваемый вид

Минусы:
Использует Jquery -> это влияет на скорость загрузки сайта на медленном инете.

Установка:
Открываем header.php (в мфс это файл blocks/head.php) и перед тегом

</head>

Добавим код:

<!– tooltip sfb –>
    <script type="text/javascript" src="/tooltip.js"></script>
<script>
$(document).ready(function(){$("a").easyTooltip()});$(document).ready(function(){$("img").easyTooltip()});
</script>
<style>#easyTooltip{
    padding:10px;
    border:1px solid #999999;
    background:#f1f1f1;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #666666;
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    }
    </style>

    <!– !tooltip –>

Если у Вас Jquery подключён был, то тогда заработает. Если не работает, то перед вставленным кодом добавьте строку:

Ну и сами файлы в архиве.

Рассмотрим разбор стиля:

filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;

Задана прозрачность хинта. color: #666666; – цвет текста на хинте.

border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;

Здесь задан радиус, по которому скругляются углы. С этими значениями можно поиграть и подобрать нужное – либо вообще удалить.

– background:#f1f1f1; – это фон хинта в HEX формате – можно смело подбирать нужный вам.
– padding:10px; – задан отступ текста от краёв всплывающего хинта.
– border:1px solid #999999; – задан тип границы. В данном случае – это граница толщиной 1px, цвета #999999, которая является непрерывной линией. Подробнее о границах можно почитать в гугле, они бывают как solid, так и dashed, dotted и др. На эту тему есть много статей.

Вот в принципе и всё…