Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2012, 02:56
Новичок на форуме
Отправить личное сообщение для negatiff Посмотреть профиль Найти все сообщения от negatiff
 
Регистрация: 13.05.2012
Сообщений: 5

Всплывающая подсказка
Добрый вечер, подскажите пожалуйста как реализовать нечто подобное:

На wordpress.

Т.е. при наведении появляется что то типа всплывающей подсказки. заголовок и контент генерируется php кодом типа:
<?php the_title() ?>

и т.д.

Пробовал несколько готовых jquery плагинов, но они к сожалению выводят только html, т.е. вместо php кода ничего не выводится.

Подскажите пожалуйста, куда шагать?
С уважением. Николай.

Последний раз редактировалось negatiff, 06.06.2012 в 03:00.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2012, 09:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от negatiff
Всплывающая подсказка
На клиенте или на сервере ?
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2012, 13:58
Аспирант
Отправить личное сообщение для frant32 Посмотреть профиль Найти все сообщения от frant32
 
Регистрация: 03.02.2012
Сообщений: 67

Цитата:
На клиенте
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<style>
div#title {
	position:absolute;
	top:0;
	left:0;
	padding:5px;
	width:200px;
	height:200px;
	border: 1px solid #283250;
	display:none;}
div#container img{width:100px;
                  height:125px;}	
</style>
<script>
$(document).ready(function(){
  $('#container img').hover(
     function(){$('#container img').mousemove(function (pos) {
	  	$("div#title").css('left',(pos.pageX+20)+'px').css('top',(pos.pageY+20)+'px').css('display','block').css('background','#ccc');  $('div#title').html($('#container img').attr('title')+'\n <a href="http://ya.ru">hello</a>');
	  }); },
	 function(){$('div#title').css('display','none');}
  );
	    
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
</head>

<div id='container'>
<div id='title'></div>
 <img src="http://im4-tub-ua.yandex.net/i?id=132572371-61-72" title='picture of motobiker'/>
</div>
<body>
</body>
</html>



только как потом нажать на ссылку в этом окошке , надо подумать (думаю задержку сделать можно)

Последний раз редактировалось frant32, 05.06.2012 в 14:02.
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2012, 03:00
Новичок на форуме
Отправить личное сообщение для negatiff Посмотреть профиль Найти все сообщения от negatiff
 
Регистрация: 13.05.2012
Сообщений: 5

Спасибо большое за помощь, нашел уже написанное решение

Вот как решил если кому нужно будет.

http://dimox.name/beautiful-tooltips-with-jquery/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающая подсказка modestes Элементы интерфейса 4 12.04.2012 16:52
При наведении курсора смена картинки и всплывающая подсказка sly Общие вопросы Javascript 0 06.06.2010 17:53
всплывающая подсказка Avaria Элементы интерфейса 2 12.02.2010 06:32
Всплывающая подсказка над полем kampil (X)HTML/CSS 9 25.10.2009 23:16
Всплывающая подсказка Kaito Общие вопросы Javascript 1 16.09.2008 17:28