Перейти к публикации
ga-mpk

Tooltip на JS

Рекомендованные сообщения

ga-mpk

Решил сделать подсказки с позиционированием.

Т.е при определённом "class" подсказка будет слева либо справа или вверху или внизу. Но как организовать так и не понял. Полез на сайт http://sfquery.ru нашел там вот такой выход

$(".tooltip").tooltip({ position: "bottom"});

Исходя из этого кода, если задан class="tooltip", то подсказка должна быть внизу.

На примере такого кода JS у меня вообще ничего не получилось.

Прошу помощи!!

Что не так??

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

А вы плагин вообще подключили?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ga-mpk

да плагин tooltip у меня стоит.

И стили easytooltips есть

Если в элементе есть title, то плагин работает, но позиционирование не происходит

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ga-mpk

На стили подсказок у меня стоит вот такой код

 

<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>  

<script>
$(document).ready(function(){$("a").easyTooltip()});$(document).ready(function(){$("img").easyTooltip()});$(document).ready(function(){$("span").easyTooltip()});
</script>
ну css не за чем вылаживать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ge0r

А не легче сделать только на CSS?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ga-mpk

А не легче сделать только на CSS?

 

Вопрос как??

Я так и не понял как сделать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ge0r

Юзай after, hover, content.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ga-mpk

Можете чуток растолковать??

А то я ничего не понял, что из этих свойств делать

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ge0r

.title:hover::after {

content: attr(my-title);

left: 20%; top: 30%;

/* Дальше стиль подсказки */

}

 

Используем так: <a class='title' href='#' my-title='Текст подсказки'>GEOR</a>

Изменено пользователем Geor

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ga-mpk

Спасибо! Сейчас испробуем!

 

А вместо my-title можно просто title или alt??

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ge0r

Можно. В CSS стиле замени my-title в теге content на желаемое.

P.s. Если помог, ставь +'ик)

Изменено пользователем Geor

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

title

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ga-mpk

Спасибо, помогли. А как сделать с плавное появление этой подсказки? В CSS - это как-то можно, вот как я не знаю.

И можно как-то сделать подсказку, что-бы не ставить везде class="title" ??

 

И ещё, когда я меняю left, top , то у меня позиция подсказки не меняется.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
DrEz

@ga-mpk,Может быть так?

Например, подсказка находится Здесь.

<span style="cursor: pointer;" title="Привет!" alt="Привет!">Здесь</span>
Можно увеличить эффект, если задать свойства CSS

 

a.podskazka {
position: relative;
text-decoration: none !important;
color:#0080C0 !important;
font-weight:bold !important;
}

a.podskazka:hover {
z-index: 999;
background-color: #0080C0;
color: #fff !important;}

a.podskazka span {
display: none;
}

a.podskazka:hover span {
display: block;
position: absolute;
top:2em; left:2em;
width:250px;
padding:5px;
background-color: #0080C0;
color: #FFFFFF;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...