Помощ код за onclick tooltip Jquery

N

niker

Registered
Здравейте,
Трябва ми код на Jquery,
с който като кликнеш на някакъв линк и да ми изкарва tooltip балон.
 
split каза:
http://leandrovieira.com/projects/jquery/lightbox/
Увеличете...
Офф, не това... туултип е едно като с балончета бе като си сложиш мишката на нещо и хоп балон, ва е друго
 
Охх трябвами при click, а не при mouseover
Но иначе, последния беше най-близо, че ми трябва с jquery
но при click
 
Liberate каза:
http://flowplayer.org/tools/tooltip.html
http://flowplayer.org/tools/tooltip.html#events
Увеличете...

Ей начи 5 пъти трябва да го повторя.
Трябва ми като кликна на няква картинка и да ми изкарва балон.
Не е баш tooltip
 
Можеш лесно да си редактираш с 1-2 малки промени кода, за да пасне на твоите нужди, но в SimpleTip има и опция за клик :)

Сваляш SimpleTip, отваряш файла, намираш реда където пише persistent: false и го слагаш на true. Това е. Вече ще работи при клик :)
 
F1r3Fl3x каза:
Можеш лесно да си редактираш с 1-2 малки промени кода, за да пасне на твоите нужди, но в SimpleTip има и опция за клик :)

Сваляш SimpleTip, отваряш файла, намираш реда където пише persistent: false и го слагаш на true. Това е. Вече ще работи при клик :)
Увеличете...

Карай, виж:

<img src="staticContentImages/refresh.gif" onclick="baloon('fdfddfdfdf');">

function baloon(Text) {
var offsetX = 15;
var offsetY = 15;
$('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + Text + '</div><div class="tipFooter"></div></div>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.fadeIn('slow').fadeTo('10',0.9).appendTo('body');
}

Не обичам плъгини и такива работи, предпочитам мой код :).
Искам малък и точен скрип. Не съм много напред в js-то,
ако може искам да едитна тоя код :)
 
Пробвай така :)
Код: 
<img src="staticContentImages/refresh.gif" onclick="baloon('fdfddfdfdf');">

// При зареждане на страницата, div-a се вкарва в страницата 
$(document).ready(function(){
$('<div id="tooltip" style="display:none;"><div class="tipHeader"></div><div class="tipBody">' + Text + '</div><div class="tipFooter"></div></div>').appendTo('body');
});

function baloon(Text) {
var $tt = $('#tooltip');
if($tt.css('display')  != 'none') //Ако има друг създаден балон го скрива
$tt.fadeOut('slow');


var offsetX = 15;
var offsetY = 15;
$tt
.text(Text)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.fadeIn('slow').fadeTo('10',0.9);
}
 
F1r3Fl3x каза:
Пробвай така :)
Код: 
<img src="staticContentImages/refresh.gif" onclick="baloon('fdfddfdfdf');">

// При зареждане на страницата, div-a се вкарва в страницата 
$(document).ready(function(){
$('<div id="tooltip" style="display:none;"><div class="tipHeader"></div><div class="tipBody">' + Text + '</div><div class="tipFooter"></div></div>').appendTo('body');
});

function baloon(Text) {
var $tt = $('#tooltip');
if($tt.css('display')  != 'none') //Ако има друг създаден балон го скрива
$tt.fadeOut('slow');


var offsetX = 15;
var offsetY = 15;
$tt
.text(Text)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.fadeIn('slow').fadeTo('10',0.9);
}
Увеличете...

А няма ли начин без display:none, щото ако
го съчетая с пхп ще трябва да иша 1000 такива дива....

Трябвами една фунцкия като кликна да изкаржа балон с текста, който
ще е зададен от фунцията, и една като цъкна да го маха, но това вече може и да се оправя :)
без да си играя с дивове ?
Дали ще има варянт :cry:
 
niker каза:
F1r3Fl3x каза:
Пробвай така :)
Код: 
<img src="staticContentImages/refresh.gif" onclick="baloon('fdfddfdfdf');">

// При зареждане на страницата, div-a се вкарва в страницата 
$(document).ready(function(){
$('<div id="tooltip" style="display:none;"><div class="tipHeader"></div><div class="tipBody">' + Text + '</div><div class="tipFooter"></div></div>').appendTo('body');
});

function baloon(Text) {
var $tt = $('#tooltip');
if($tt.css('display')  != 'none') //Ако има друг създаден балон го скрива
$tt.fadeOut('slow');


var offsetX = 15;
var offsetY = 15;
$tt
.text(Text)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.fadeIn('slow').fadeTo('10',0.9);
}
Увеличете...

А няма ли начин без display:none, щото ако
го съчетая с пхп ще трябва да иша 1000 такива дива....

Трябвами една фунцкия като кликна да изкаржа балон с текста, който
ще е зададен от фунцията, и една като цъкна да го маха, но това вече може и да се оправя :)
без да си играя с дивове ?
Дали ще има варянт :cry:
Увеличете...
просто направи да не е id tooltip а ми class tooltip или си го оправи там в css
 
@niker, не знам дали съм те разбрал правилно.
Ти имаш 20 снимки на страницата (примерно) и искаш на всяка от тях като се цъкне да излиза този туултип с различен текст (картинка1, картинка2 и тнт), нали?
Ако е така, всичко е готово. Не ти трябват допълнителни дивове. Скрипта ползва само един -> този с ID "tooltip".
Преди да се покаже дива, в него текста се изтрива и се слага текст, който се подава на функцията baloon:
Код: 
<img src="staticContentImages/refresh.gif" onclick="baloon('fdfddfdfdf');">
Този код ще извади туултипа с текст: fdfddfdfdf

Вече ако искаш да могат да се показват по няколко туултипа едновременно, кажи. Редакцията на кода е минимална :)
 
Пробвах го този код, моя грешка нещо не бях разбрал, съжалявам.
Обаче нещо не бачка кода :cry:

#clicktip { position: absolute; width: 450px; background-color: #000; display: none; }

$(document).ready(function(){
$('<div id="clicktip">' + Text + '</div>').appendTo('body');
});
function baloon(Text) {
var $tt = $('#clicktip');
if($tt.css('display') != 'none')
$tt.fadeOut('slow');
var offsetX = 15;
var offsetY = 15;
$tt.text(Text)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.fadeIn('slow').fadeTo('10',0.9);
}

<img src="staticContentImages/refresh.gif" onclick="baloon('fdfddfdfdf');">

Нищо не става
 
я виж това ако става :) ЦъК

preview42.jpg
 
Тук аз имам грешка в кода :oops:
Замени $tt.text(Text) със $tt.html(Text) Така трябва да работи :)

Едит: Ако не работи отново, дай output-а на конзолата за грешки (ctrl+shift+j).
 
F1r3Fl3x каза:
Тук аз имам грешка в кода :oops:
Замени $tt.text(Text) със $tt.html(Text) Така трябва да работи :)

Едит: Ако не работи отново, дай output-а на конзолата за грешки (ctrl+shift+j).
Увеличете...

Пак не бачка естествено:

Error: e is not defined
Source File: http://сайта/js.js
Line: 29

Пада се:
.css('top', e.pageY + offsetY)





$(document).ready(function(){
$('<div id="clicktip">' + Text + '</div>').appendTo('body');
});
function baloon(Text) {
var $tt = $('#clicktip');
if($tt.css('display') != 'none')
$tt.fadeOut('slow');
var offsetX = 15;
var offsetY = 15;
$tt.html(Text)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.fadeIn('slow').fadeTo('10',0.9);
}
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе