(02.11.2016 17:35:57)Admin писал(а): Так как надо то? Я уже запутался. Еще и спойлер появился...
Специально же сделал всплывающую подсказку со стилем .hint, чтобы не прописывать title.
И еще в сообщении 31 я удалил .text($(this).attr("title")) из кода, а Вы - нет.
Здравствуйте, доброе время суток.
По порядку.
1. Насчет всплывающей подсказки со стилем .hint все нормально - все работает, в этом случае title не прописываем, тут все работает. Насчет
.text($(this).attr("title")) у себя удалил, а скопировал старый код
Я спрашивал, можно ли реализовать данный момент без <span id="hint"></span>, т.е реализовать как-то по-другому, так как хотел бы данную подсказку реализовать и для небольшого спойлера, а у меня их несколько будет, вот и подумал, что можно ли там обойтись при появлении подсказки без стиля .hint
С 1 пунктом разобрался, единственный вопрос насчет реализации без <span id="hint"></span> или тут большие изменения в коде нужно будет делать...
2. Собственно сам спойлер, где я хотел бы подобную подсказку реализовать, т.е. их будет 3. Название спойлера, содержимое (имеется ссылка) и "Свернуть"
Сам код спойлера небольшой:
Код:
$(document).ready(function(){
$(".loader").click(function(){
if ($(this).text()=='Autodesk') $(this).text('Свернуть').attr('title','Закрыть');
else $(this).text('Autodesk').attr('title','Узнать подробнее');
$(this).parent().children(".text").toggle("fast");
return false;
});
});
html код:
<div>
<p class="text" style="display: none; margin: 0;">Перейти вы можете далее по ссылке
<a href="#" class="loader" title="Посмотреть">Autodesk</a> или узнать на сайте разработчика</p>
<a class="loader" href="#" title="Узнать подробнее">Autodesk</a>
</div>
При таком раскладе все работает отлично и title обычный, вот и хотел сделать title как для видео, тут конечно подход другой нужен, но задача та же, чтобы title был как в примере с видео
Если при таком раскладе, подключаю jQuery код для появления подсказки:
Код:
$(document).ready(function(){
$(".loader").toolTip_text(); // класс loader
});
(function($) {
$.fn.toolTip_text = function(options){
var defaults = {
xOffset: 15,
yOffset: -15,
toolTip_textId: "toolTip_text",
clickRemove: false,
content: "",
useElement: ""
};
var options = $.extend(defaults, options);
var content;
this.each(function() {
var title = $(this).attr("title");
$(this).hover(function(e){
content = (options.content != "") ? options.content : title;
content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
$(this).attr("title","");
if (content != "" && content != undefined){
$("body").append("<div id='"+ options.toolTip_textId +"'>"+ content +"</div>");
$("#" + options.toolTip_textId)
.css("position","absolute")
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
.css("display","none")
.css("width","")
.fadeIn("fast")
}
},
function(){
$("#" + options.toolTip_textId).remove();
$(this).attr("title",title);
});
$(this).mousemove(function(e){
$("#" + options.toolTip_textId)
.css("top",(e.pageY - options.yOffset) + "px")
.css("left",(e.pageX + options.xOffset) + "px")
});
if(options.clickRemove){
$(this).mousedown(function(e){
$("#" + options.toolTip_textId).remove();
$(this).attr("title",title);
});
}
});
};
})(jQuery);
далее оформляем все при помощи css, все работает, за исключением ссылки "Свернуть", которая одновременно является "Autodesk" согласно js 1 js скрипта, так вот теперь при наведении на ссылку "Свернуть", все время показывается "Узнать подробнее", так как подключается 2 скрипт на jQuery для подсказки.
Скрытый класс я думаю тут не сработает или как-то проще все можно реализовать?
Надеюсь, вы более или менее разобрались, что данный момент появления подсказки я хотел бы и для спойлера сделать, вот и думаю как лучше и проще все оформить, получается как-то не очень правильно...
Заранее благодарен