Как реализовать свой tooltip или оформить всплывающее окно? - Дизайн, оформление, стили, визуализация

Доброго времени суток! Подскажите как сделать всплывающее окно при наведении курсора на аватар пользователя!?
Пример тут http://demo.joomlaxtc.com/blogmonster/  модуль Our Community
Подскажите это хак или существуют настройки в модулях и компоненте!?
Заранее всем спасибо!

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

Спасибо большое за помощь! 

Иногда очень полезно раскрасить tooltip под гамму своего шаблона.
Хотя темный цвет используемый по умолчанию, подходит большинству шаблонов, но поиграться попробуйте
Откройте файл ваш_сайт/components/com_community/assets/script-1.2.js
В строке:
можете задать другие параметры настройки всплывающей подсказки, выбрав из возможных:
cream
light
dark
red
green
blue
Если потребуется более точная подгонка, то выбрав наиболее подходящий стиль, из стандартных и указав его в этой строке (например цвет blue, для шаблонов в сине-голубых тонах):
переходим к строкам раскраски стилей:
Для blue, эти строки начинаются с позиции 2761, я приведу уже готовый пример для своего сине-голубого шаблона:

Вооо СпасиБО! 

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

Думаю многим было бы интересно разбавить красками свой сайт))

Спасибо заранее за ответы)

Изменить вид всплывающих окон можно, отредактировав файл стиля и перекрасив изображения, используемые для формирования окон:
components/com_community/assets/window.css
и components/com_community/assets/window/файлы_.png и _.gif

Изменить вид всплывающих окон можно, отредактировав файл стиля и перекрасив изображения, используемые для формирования окон:
components/com_community/assets/window.css
и components/com_community/assets/window/файлы_.png и _.gif

Спасибо! Все получилось))
bg-sprited.png этот файл нужно видоизменять, и соответственно window.css

Цвета в тултипах поменяли, а поменять:
1. чтобы подсказка была не справа а слева)
2. или как вообще сделать чтоб подсказка не узжала за пределы страницы, а то появляется горизонтальная полоса прокрутки((

Или еще как вариант - как сделать чтоб вот допустим подсказка широкая, и справа ей не хватает места, и она вылазит уже с левой стороны)
как то так)

Осваивайте Jquery. Там много чего интересного.

2) Где (в каком файле и в каких строчках) я могу изменить цвета окна всплывающих подсказок и окошка написания сообщения (стандартно чёрного цвета) в JomSocial?
Спасибо.

Читайте здесь

Всплывающие подсказки под шаблон сделал. Супер! Спасибо огромное! (Добавил "+" в "репу"). А про изменение цвета окошка написания сообщений "статей" нет?

Так, а чем отличается подход к правке окошка личного сообщения от описанных примеров?


Открываем стиль: /components/com_community/assets/window.css
1) Изменяем темный фон верхней полоски окна:
строка: 197
Фон правого уголока под кнопочкой "X" правим в строке 305:

2)
Где #CCC - фон нижней части окна
Кстати, здесь же можете заменить индикатор window/wait.gif на этот анимированный gif:


и немного подстроив параметры его отображения, исходя из его размеров
background: #CCC url(window/wait.gif) no-repeat -44px -15px;
и в блоке со строки 185:
3) Прозрачный ободок окна правим в фотошопе, перекрашивая файл
/components/com_community/assets/window/bg-sprited.png


[вложение удалено Администратором]

Круто! Круто! Ещё раз огромное спасибо!

В Фотошопе тоже тоже все переправил. Супер.

Всё получилось. Теперь с шаблоном как родные... Вот, чтобы поделиться счастьем, скриншоты (хотя там шаблона практически не видно...):
http://narod.ru/disk/2107262001/Screenshot.PNG.html
http://narod.ru/disk/2107277001/Screenshot2.PNG.html
Спасибо от всей души! :-)

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

Хочу добавить пару ссылок в окно tooltip, но не могу так, как навести на него невозможно - сразу пропадает.

Знающие query помогите пожалуйста, у меня уже мозг кипит..

С меня куча плюсов

Тут очень долго подсказывать придется, так как разбираться с созданными событиями не менее долго.
Попробуйте разобраться сам в файле components/com_community/assets/script-1.2.js
для начала измените строку:
var tipHide    = {when: {event: 'mouseout'}, effect: {length: 10}}
на
var tipHide    = {when: {event: 'mouseout'}, effect: {length: 2000}}
Эффект затухания будет дольше.
Можете потренировать пользователей, успеть нажать на ссылку пока не пропадет тултип
Ну или такой вариант:
var tipHide    = {when: {event: 'mouseout'}, fixed: true }
Будут успевать передвинуть мышку? Если нет, то пусть тренируются. Расслаблять пользователей нельзя.
Ну, а если посложнее хотите, то попробуйте написать свой эффект на событие 'mouseout'

Тут очень долго подсказывать придется, так как разбираться с созданными событиями не менее долго.
Попробуйте разобраться сам в файле components/com_community/assets/script-1.2.js
для начала измените строку:
var tipHide    = {when: {event: 'mouseout'}, effect: {length: 10}}
на
var tipHide    = {when: {event: 'mouseout'}, effect: {length: 2000}}
Эффект затухания будет дольше.
Можете потренировать пользователей, успеть нажать на ссылку пока не пропадет тултип
Ну или такой вариант:
var tipHide    = {when: {event: 'mouseout'}, fixed: true }
Будут успевать передвинуть мышку? Если нет, то пусть тренируются. Расслаблять пользователей нельзя.
Ну, а если посложнее хотите, то попробуйте написать свой эффект на событие 'mouseout'

Блииин, Вы гений :DDD

что только я не делал с этой строкой... Все кроме fixed: true;

Решение проблемы:
заменить

var tipHide    = {when: {event: 'mouseout'}, effect: {length: 1}}

на

var tipHide    = {when: {event: 'mouseout'}, fixed: true, effect: {length: 1}}

Цвета в тултипах поменяли, а поменять:
1. чтобы подсказка была не справа а слева)
2. или как вообще сделать чтоб подсказка не узжала за пределы страницы, а то появляется горизонтальная полоса прокрутки((

Или еще как вариант - как сделать чтоб вот допустим подсказка широкая, и справа ей не хватает места, и она вылазит уже с левой стороны)
как то так)

Актуально!

Или, если кто знает, то прошу подсказать, как реализовать подсказку для модулей.

http://docs.joomla.org/How_to_add_tooltips_to_your_Joomla!_website
http://joomlaforum.ru/index.php/topic,209878.0.html

http://www.joomla-wiki.de/dokumentation/Joomla!_Programmierung/Framework/JHtmlBehavior/modal

Спасибо преогромное!