Всплывающая подсказка jquery: Создание простых всплывающих подсказок на HTML5, CSS и jQuery / Habr – Всплывающие подсказки на jquery при клике или наведении курсора

Leave a Comment / Разное / By /

Всплывающие подсказки

 

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js»></script>

<script type=»text/javascript»>

$(document).ready(function() {

$(‘#link’).click(function() {viewTooltip(this, $(‘#block’));});

$(‘#block’).click(function() {$($(‘#block’)).fadeOut(‘fast’);});

});

//Показывает всплывающую подсказку

//elem — элемент для которого подсказка

//block — блок подсказки

function viewTooltip(elem, block)

{

    $elTop = $(elem).height();

    $elLeft = 0;        

    $(elem).css({‘outline’: ‘none’});

    $(block).css({‘position’: ‘absolute’,

                   ‘top’: (elem.offsetTop + $elTop) + ‘px’,

                   ‘left’: (elem.offsetLeft + $elLeft) + ‘px’

                });

    if($(block).is(‘:visible’)) $(block).fadeOut(‘fast’);

    else $(block).fadeIn(‘fast’);

    elem.focus();

}

</script>

<style type=»text/css»>

.hide {

     display: none;

}

.show {

    padding: 5px;

    background: #fff;

    border: 1px solid #ccc;

    box-shadow: #ccc 0 0 10px;

    border-radius: 5px;

    width: 320px;     

}

a {

    text-decoration: none; /* Убираем подчеркивание */

    border-bottom: 1px dashed #000080; /* Добавляем свою линию */     

  }

</style>

</head>

<body>

<!— Ссылка —>

<a href=»javascript:;»>Симфония</a>

<!— Блок —>

<div>

<b>Симфония</b> — музыкальное произведение для оркестра. Как правило, симфонии пишутся для большого оркестра смешанного состава (симфонического), но существуют и симфонии для струнного, камерного, духового и других оркестров; в симфонию могут вводиться хор и сольные вокальные голоса.

</div>

</body>

</html>

 

Всплывающие подсказки на CSS & JQuery + 7 примеров

Красивые всплывающие подсказки  CSS и JQuery, и не только одного стиля, а из 7 разных по вкусу и цвету вариантов. Эти всплывающие подсказки создавались при помощи CSS3, градиента (linear-gradient), тени для объектов и тени для текста, при помощи селекторов :after и :before, и т.д. Также обязательно посмотрите ещё варианты анимационных всплывающих подсказок.

Каждая подсказка имеет свои стили, поэтому в эту подсказку можно добавить практически любой текст, в том числе и большой длины

Семь стилей подсказок

Есть семь стилей в настоящее время в этот пакет:

  • сладкий цвет;
  • мини подсказка;
  • большая серая;
  • ночной цвет;
  • блестящий красный;
  • мягкий голубой;
  • большая желтая подсказка.

Все подсказки достаточно красивые и современные.

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

Техническая часть подсказок

Чтобы использовать любую их подсказок, Вам необходимо использовать подобную структуру html кода:

<!—Подключение стилей—>  

<link rel=»stylesheet» href=»/web-developer/jquery/sweet-tooltip.css»>  

  

<!—Ссылка всплывающей подсказки—>  

<a href=»#» data-style-tooltip=»style name» data-text-tooltip=»Tooltip’s text to be disaplayed»>  

        Ваш текст  

</a>  

  

<!— Подключаем JavaScript —>  

<script type=»text/javascript» src=»/web-developer/jquery/jquery.js»></script>  

<script type=»text/javascript» src=»/web-developer/jquery/sweet-tooltip.js»></script>  

data-style-tooltip: это атрибут HTML5, содержащий имя стиля.

data-text-tooltip

: это атрибут HTML5,, содержащие текст всплывающей подсказки, то есть то, что будет показано пользователю при наведении курсоры мыши.

Поскольку я использую :after и :before селекторы CSS3, чтобы добавить больше элементов для подсказки, любой элемент может быть присоединен к подсказке, но не контейнерный элемент, например такой как input или image.

Код JQuery

JavaScript включает mouseover и mouseout для каждой ссылки подсказки. При наведении курсора мыши, код будет захватывать значения данных: текст для всплывающей подсказки и значения стилей подсказки, проверит положение ссылки подсказки, а затем будет генерировать всплывающую подсказку содержащую эти атрибуты. Пока mouseout будет скрыт, будет и удалена подсказка.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

$(‘.sweet-tooltip’).bind(‘mouseover’, function() {  

      

    tooltip             = $(this);  

    tooltipText         = tooltip.attr(‘data-text-tooltip’);  

    tooltipClassName    = tooltip.attr(‘data-style-tooltip’);  

    tooltipClass        = ‘.’ + tooltipClassName;  

      

    if(tooltip.hasClass(‘showed-tooltip’)) return false;  

      

    tooltip.addClass(‘showed-tooltip’)  

             .after(‘<div>’+tooltipText+'</div>’);  

  

      

    tooltipPosTop   = tooltip.position().top — $(tooltipClass).outerHeight() — 10;  

    tooltipPosLeft = tooltip.position().left;  

    tooltipPosLeft = tooltipPosLeft — (($(tooltipClass).outerWidth()/2) — tooltip.outerWidth()/2);  

      

    $(tooltipClass).css({ ‘left’: tooltipPosLeft, ‘top’: tooltipPosTop })  

                        .animate({‘opacity’:’1′, ‘marginTop’:’0′}, 500);  

      

}).bind(‘mouseout’, function() {  

      

    $(tooltipClass).animate({‘opacity’:’0′, ‘marginTop’:’-10px’}, 500, function() {  

              

        $(this).remove();  

        tooltip.removeClass(‘showed-tooltip’);  

              

    });  

});

На этом этапе, кода достаточно, и он будет отлично выполнять свою функцию.

Заключение

Мы создали только семь цветовых стилей, но Вы можете создать свои, добавив соответствующие стили в sweet-tooltip.css. Вот и все, думаю Вам было интересно!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.webstuffshare.com
Перевел: Владислав Бондаренко

Навигационные блоки, всплывающие подсказки, меню и ещё несколько JQuery плагинов

И снова здравствуйте, дорогие читатели блога. Сегодня снова спешу представить Вам очередную подборку JQuery плагинов, которые Вы сможете бесплатно скачать и использовать для своих любимых ресурсов 🙂 В общем не буду перечислять, что входит в данный пост, лучше посмотрите сами.

Так же я рекомендую посмотреть прошлые подборки:

Навигационные JQuery блоки

Одна из простых и красивых реализаций навигации по сайту.

Пример ι Скачать исходники

Всплывающие подсказки с использованием JQuery

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

Пример ι Скачать исходники

Поле для поиска с JQuery

Классное поле для поиска по сайту с полем результатов. Очень понравилось то, что есть несколько цветовых схем.

Пример ι Скачать исходники

Многоуровневое JQuery меню

Простое меню для сайта с выпадающим подменю. Очень просто и красиво.

Пример ι Скачать исходники

JQuery слайдер для таблиц

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

Пример ι Скачать исходники

Проверка пароля на надёжность

Полезный плагин который проверяет надёжность пароля пользователей сайта.

Пример ι Скачать исходники

JQuery плагин для голосования на сайте

Хотите узнать мнение своих пользователей? С помощь этого плагина это у Вас получится 🙂 Перед загрузкой предоставляется возможно настроить оформление плагина.

Пример ι Страница загрузки

Блок прокрутки новостей на сайт

Классная реализация показа новостей на Вашем ресурсе.

Пример ι Скачать исходники

Классные боковые вкладки на сайт

Полезные вкладки с контентом, которые плавно выезжают при нажатии на ссылку.

Пример ι Скачать исходники

JQuery панель социальных закладок

красивая панель закладок для Вашего сайта.

Пример ι Скачать исходники

Простые подсказки на CSS3 и jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    white-space: nowrap;
    border-bottom: 1px dotted #777;
}
 
.tooltip-content {
    opacity: 0;
    visibility: hidden;		
    font: 12px Arial, Helvetica;
    text-align: center;
    border-color: #aaa #555 #555 #aaa;
    border-style: solid;
    border-width: 1px;
    width: 150px;
    padding: 15px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -76px;
 
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
    background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));		
    -moz-box-shadow: 1px 1px 0 #555,
                     2px 2px 0 #555,
                     3px 3px 1px rgba(0, 0, 0, .3),
                     0 1px 0 rgba(255,255,255, .5) inset;
    -webkit-box-shadow: 1px 1px 0 #555,
	                2px 2px 0 #555,
		        3px 3px 1px rgba(0, 0, 0, .3),
		        0 1px 0 rgba(255,255,255, .5) inset;
    box-shadow: 1px 1px 0 #555,
                2px 2px 0 #555,
                3px 3px 1px rgba(0, 0, 0, .3),
                0 1px 0	rgba(255,255,255, .5) inset;					
    -webkit-transition: bottom .2s ease, opacity .2s ease;
    -moz-transition: bottom .2s ease, opacity .2s ease;
    -ms-transition: bottom .2s ease, opacity .2s ease;
    -o-transition: bottom .2s ease, opacity .2s ease;
    transition: bottom .2s ease, opacity .2s ease;					
}
 
.tooltip-content:after,
.tooltip-content:before {
    border-right: 16px solid transparent;
    border-top: 15px solid #fff;
    bottom: -15px;
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
}
 
.tooltip-content:before {
    border-right-width: 25px;
    border-top-color: #555;
    border-top-width: 15px;
    bottom: -15px;
}
 
.tooltip:hover .tooltip-content{
    opacity: 1;
    visibility: visible;
    bottom: 30px;		
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *