Красивые всплывающие подсказки с помощью jQuery

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

Установка

Код скрипта выглядит следующим образом:

Сохраните его в файл с расширением .js, например, scripts.js и подключите к сайту перед тегом </head>, не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код сайта добавляется такой код:

Далее нужно добавить в CSS-файл вашего сайта следующие стили:

Теперь осталось поместить необходимый текст в тег <span> с классом jQtooltip и атрибутом title,  т.е. вот так:

Если вы желаете, чтобы вместо текста был квадратик, как в , тогда в CSS-файл нужно добавить еще такие стили:

А html-код в этом случае будет таким:

 

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

Вот, собственно, и все.

Ive never been able to do this, perhaps because of a constitutional incapacity for sustained work at something without http://writepaper4me.com at least the possibility that what im doing will be publishable

Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©