Главная » Шпаргалка » PHP MYSQL javascript » jQuery » подсказокa на jQuery

Еще один вид подсказок на jQuery

http://www.ruseller.com/lessons/les205/example.htm

Еще один вид подсказок на jQuery

В этом уроке я расскажу о еще одном виде подсказок на jQuery.
Здесь в качестве подсказки может быть текст, картинка, список и др. В создании таких подсказок нам поможет плагин для jQuery, который называется Easy Tooltip 1.0
    

Шаг 1.

Подключим фреймворк jQuery и плагин Easy Tooltip 1.0 к нашему документу, прописав следующий код между тегами <head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltip.js"></script>

Шаг 2.

Далее пропишем следующий скрипт:

<script type="text/javascript">
    $(document).ready(function(){    
        $("a#link").easyTooltip({
            useElement: "item"                   
        });
    });
</script>

Шаг 3.

В отдельный CSS-файл или между тегами <head> пропишем стили, отвечающие за внешний вид посказок. Вы можете отредактировать эти стили по своему желанию.

#easyTooltip{

margin:0 10px 1em 0;

width:250px;

padding:8px;

background:#fcfcfc;

border:1px solid #e1e1e1;

line-height:130%;

}

#easyTooltip h3{

margin:0 0 .5em 0;

font:13px Arial, Helvetica, sans-serif;

text-transform:uppercase;

}

#easyTooltip p{

margin:0 0 .5em 0;

}

#easyTooltip img{

background:#fff;

padding:1px;

border:1px solid #e1e1e1;

float:left;

margin-right:10px;

}

#item{display:none;}

В нужном нам месте на странице пропишем ссылку и дадим ей идентификатор link. Например:

Наведите мышкой <a href="http://ruseller.com/" id="link">сюда</a>

Создадим блок с идентификатором item, в который впишем текст непосредственно самой подсказки (по желанию сюда можно вставить картинку, список, или что то еще). Т.е. у Вас должно получиться примерно так:

<div id="item">

<h3>Ruseller.com</h3>

<img src="image.gif" />

<p>Текст</p>

</div>

Вот и все! Оригинальные и функциональные подсказки для ссылок готовы!