Внешний вид подсказки при наведении мышью на аватар

Поделиться1Чт, 28 Фев 2013 14:46:33

Автор: Камели
Заслуженный
Зарегистрирован: Ср, 23 Янв 2013
Сообщений: 75
Уважение: +1
Позитив: +5
Пол: Женский
Последний визит:
Вт, 14 Май 2013 07:50:15

Здравствуйте.
У меня такой вопрос, а можно ли изменить внешний вид подсказки, которая всплывает при наведении мышью на аватарку? Там еще ник отображается. Есть, например, чёрные и чуть прозрачные, видела на каком-то форуме (не могу уточнить адрес).

0

Поделиться2Чт, 28 Фев 2013 15:22:44

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

Посмотрите на этом форуме
http://russia-west.ru
Так устроит?
Внешния фид поменять можно без проблем.
Только там подсказка по всему форуму изменена, не только на аватар
Подсказка ко всем элементам форума которые имеют атрибут title

Отредактировано Good (Чт, 28 Фев 2013 15:23:56)

0

Поделиться3Пт, 1 Мар 2013 03:36:58

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11570
Последний визит:
Сегодня 21:00:54

В HTML верх

<style type="text/css">
.tipsy-inner {
font-size:13px;
}
</style>
<script type="text/javascript">$(document).ready(function() { $('.pa-avatar img[title]').tipsy({gravity: 's'});});</script>

0

Поделиться4Пт, 1 Мар 2013 09:21:56

Автор: Камели
Заслуженный
Зарегистрирован: Ср, 23 Янв 2013
Сообщений: 75
Уважение: +1
Позитив: +5
Пол: Женский
Последний визит:
Вт, 14 Май 2013 07:50:15

Deff
Спасибо, выручили!

Good
Мне требовалось только на аватар, но я не знала, что можно изменять все другие подсказки. Очень даже заинтересовал ваш вариант, хотелось бы попробовать)

0

Поделиться5Пт, 1 Мар 2013 12:53:35

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

В html верх

Код:

<!--Оформление всплывающей  подсказки-->
<style>
#tooltip {
position:absolute;
background-color:#fff; /* фон подсказки */
z-index: 999;
max-width:200px; /* максимальная ширина подсказки */
border:1px dotted #74A1F2; /* толщина. стиль и цвет рамки */
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
font-family:Georgia; /* шрифт подсказки */
font-size:13px; /* размер текста */
display:none;
color:#000; /* цвет текста */
text-align:center;
padding:4px;
}
</style>

в html низ

Код:

<!--скрипт всплывающей подсказки -->
<script type="text/javascript" src="http://yourjavascript.com/12208652913/quicktip.js"></script>
<script>  
 $(document).ready(function(){ 
 $('a [title]').quicktip({ speed:700 }); 
 $('img [title]').quicktip({ speed:700 }); 
 $('div [title]').quicktip({ speed:700 }); 
 $('span [title]').quicktip({ speed:700 }); 
 }); 
 </script>

А этим скриптом можно добавить атрибут title элементам форума на которые вам хочется разместить подсказку.

Код:

<!--присвоение атрибута title некоторым объекта форума -->
<script type="text/javascript">
$('div.icon').attr('title', 'Нет новых сообщений');
$('tr.inew div.icon').attr('title', 'Есть новые сообщения');
$('tr.isticky div.icon').attr('title', 'Важная тема');
$('tr.iclosed div.icon').attr('title', 'Закрытая тема');
$('td.tcr a').attr('title', 'Перейти к последнему сообщению');
$('input[name="submit"]').attr('title', 'Нажми что бы отправить');
$('input[name="preview"]').attr('title', 'Посмотри что получилось');
 </script>

Добавлять атрибут элементу можно просто добавив в скрипт строчку

$('элемент').attr('title', 'текст всплывающей подсказки');

К примеру вам хочется что бы в профиле под аватаром при наведении на ссылку Уважение всплывал какой то текст.
Добавляете в скрипт такую строчку такую строчку

$('.pa-respect').attr('title', 'Страница репутации');

Надеюсь понятно объяснил

+2

Поделиться6Пт, 1 Мар 2013 13:50:01

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Deff написал(а):

В HTML верх

Deff
Слушай, а можно как-то только стиль прописать?
Вот гляди, грузится скрипт от сервиса, который, как я понимаю, как раз отвечает за всплывание ника над авиком

Код:

<script type="text/javascript">$(document).ready(function() { $('#register img[title],#profile8 img[title]').tipsy({fade: true, gravity: 'w'}); $('#viewprofile img[title],.post-author img[title]:not(li.pa-avatar > img)').tipsy({fade: true, gravity: 's'}); });</script>

Только твой вариант стиля с tipsy-inner не проходит. Мож как-то можно привязать стиль всплывающей подсказки к дефолтному скрипту?

Я пробовал сделать только стилем, но из-за дефолтного скрипта всплывают обе подсказки при наведении.)) Отсюда и мысля про привязку к дефолтному скрипту.

0