Подсказки qTip помогите подправить

[Modestes]

Добрый день.

Сразу код

$('.support-failed').qtip({
				content: {
				text: 'Новые заявки.',
				},	
				style: {
				classes: 'ui-tooltip-youtube ui-tooltip-green ui-tooltip-shadow ui-tooltip-rounded ',

				},		
				position: {
				my: 'center right', 
				at: 'center left',  
				adjust: {         
				x: -44,
				target: $(document),
				resize: true,
				}
				},

				show: {
				delay:700,
				},				
			});			

Задача следующая:

Добавить РАЗНЫЕ подсказки для нескольких элементов, их много, соответственно отдельно для каждой подсказки писать скрипт не вариант.

Что нужно добавить в скрипт чтобы не писать его по новой для каждой подсказки?

Повторюсь, подсказки должны быть с разным текстом для всех элементов!

Понимаю что можно такое сделать, но в JQuery разбираюсь пока плохо, на оф сайте плагина тоже был, не могу понять как это делается.

Подскажите пожалуйста

В скрипте получается меняется только сам текст, и добавляется класс или айди для элемента. А вот как добавить этот элемент и прописать для него текст, я не знаю.

Версия qtip2

Edited April 19, 2012 by Modestes

[buddah]

Почему вы заставляете нас читать туториалы за вас?

Пункт Shared Options

[Modestes]

buddah Я не против их читать и всегда читаю и до вопроса читал доки, пробовал на примерах в демке но не получалось.

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

[Modestes]

хм...прочел, написал

        $(document).ready(function(){
var shared = {
	position: {
		my: 'top left', 
		at: 'bottom right',
	},
	show: 'click',
	hide: 'click',
	style {
		tip: true
	}
});

		$('.st1').qtip( $.extend({}, shared, { 
			content: 'Текст первой подсказки',
			style: {
			classes: 'ui-tooltip-red'
			}
		}));


		$('.st2').qtip( $.extend({}, shared, { 
			content: 'Текст второй подсказки',
			style: {
			classes: 'ui-tooltip-dark'
			}
		}));


<span class="st1">Один Элемент</span><br><br> 
<span class="st2">Второй Элемент</span>

Но не пашет, странно, библиотека свежая(пробовал другую подключать)

Все сделал как в примере. на ум приходит только одно, автор где то ошибся в примере.

Гляньте на код, все ли верно?

[nerv]

Добавить РАЗНЫЕ подсказки для нескольких элементов

Что Вы понимаете под "разные"?

[Modestes]

Добавить РАЗНЫЕ подсказки для нескольких элементов

Что Вы понимаете под "разные"?

Объясню.

Дал бы ссылку, но сайт на локалке.

Есть блок со статусами.

Новые. (подсказка 1)

Решенные. (подсказка 2)

На аукционе. (подсказка 3)

Проваленные. (подсказка 4)

ну и т.д и т.п

Нужно добавить к каждому статусу всплывающую подсказку - описание

Сейчас у меня получается реализовать это тупо дублированием вот этого кода для каждого статуса, лишь с изменением класса и самого текста, все остальное получается лишний код, и это еще короткий, на деле он больше, таких элементов на странице полно, соответственно зачем загружать её лишним кодом. Т.е нужно использовать один скрипт для нескольких подсказок с разным текстом.

$('.st').qtip({
				content: 'Текст подсказки',
				position: {
					my: 'top right',  
					at: 'bottom left', 
				},
				style: {
					classes: 'ui-tooltip-green ui-tooltip-shadow ui-tooltip-tipsy ui-tooltip-rounded',
					width:200,
				},

			});

Вариант на оф сайте мне подходит, но наверное я не правильно все подключил, хотя проверял тыщу раз.

Edited April 19, 2012 by Modestes

[nerv]

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

$( '.st' ).qtip({
	content: 'Текст подсказки',
	position: {
		my: 'top right',  
		at: 'bottom left'
	},
	style: {
		classes: 'ui-tooltip-green ui-tooltip-shadow ui-tooltip-tipsy ui-tooltip-rounded',
		width: 200
	}
});

[Modestes]

да дело не в этом коде, а в коде из 3 моего поста.

а этот кстати рабочий, пусть даже запятые лишние)

[nerv]

Modestes, рабочий пример в студию

[Modestes]

Я уже сам разобрался))

В общем вот рабочий скрипт, может пригодится новичкам вроде меня ))

//Создаем переменную прописываем все что нам нужно, это будут глобальные опции, позиционирование, стили и т.д

var shared = {              //Глобальные опции
        position: {
                my: 'bottom right',
                at: 'top left',			
        },		
	show: {
		delay:700,
		effect: function() {
		$(this).show(400);
		}	
	},				
        style: {
		classes: 'ui-tooltip-plain ui-tooltip-shadow ui-tooltip-rounded', //Это стили самого плагина qTip
                tip: true			
        }
};

//А это сами подсказки, тут добавляется .extend
Расширяет непосредственно сам объект jQuery. Может использоваться для добавления функций в пространство имен jQuery.
Далее приписываем переменную которою мы создали, меняем текст и класс и вуаля. 

Например:
$('.class-1').qtip( $.extend({}, shared, {
			content: 'Текст для первого элемента',
	}));	
$('.class-2').qtip( $.extend({}, shared, {
			content: 'Текст для второго элемента',
	}));	
$('.class-3').qtip( $.extend({}, shared, {
			content: 'Текст для третьего элемента',
	}));

После того как я разобрался, возниц вопрос, а что если я захочу изменить позиционирование для нескольких подсказок, или сменить их стиль, а другие оставить как были изначально.

Если добавлять опции в скрипт подсказки, то у этой подсказки отключается глобальная опция, которую мы прописали в начале.

Соответственно нам нужно создать еще одну глобальную опцию, после окончания первой глоб.опции создаем новую переменную пишем другие стили и т.д, далее уже в подсказках подставляем вновь созданную переменную, вот и все)

А делов то..тьфу...зато разобрался сам и теперь понял что да как))

З.Ы. Метод тыка рулит

Edited April 20, 2012 by Modestes