Помогите настроить tooltip
Страницы: 1
Помогите настроить tooltip
Всем привет.
Это часть кода слайдера, там будет картинка и при наведении на нее нужно вывести тултип (код ниже)
Код
<li class="voi autoload-payment loaded">
    <a href="link" title="title">     
                    <img class="voi__poster" src="КАРТИНКА">
            </a>  
</li>

Это собственно и нужно вывести при наведении на код, который сверху
Код
    <div class="tipsy tipsy-w tipsy-hovercard" style="top: 947px; left: 393px; visibility: visible; display: block; opacity: 1;">
        <div class="tipsy-arrow tipsy-arrow-w"></div>
        <div class="tipsy-inner">
            <div class="tooltip-content">
                 ОПИСАНИЕ
            </div>
        </div>
    </div>
Помогите пожалуйста. Я уже весь вечер убил..smile:confused:
Изменено: Sfox4tOn - 19 Января 2016 20:40
так чем помочь? Какой код использован для вывода тултипа? Никто не в курсе и за употребляемые стили, имейте в виду.
Мы не можем похвастаться мудростью глаз
И умелыми жестами рук,
Нам не нужно все это, чтобы друг друга понять.
Сигареты в руках, чай на столе - так замыкается круг,
И вдруг нам становится страшно что-то менять.
Короче забейте на js. 

Реализация с помощью bootstrap.



Код
<!DOCTYPE html>
<html lang="en">
<head> 
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head> 
 
 

<body>


<li class="voi autoload-payment loaded">
    <a href="link" title="title" data-toggle="popover" data-trigger="hover" data-content="Some content">     
                    <img class="voi__poster" src="КАРТИНКА">
            </a>  
</li>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>
 
 

</body>
</html>
 


Но не получается вывести контент. Как вывести  data-content из блока ?
Изменено: Sfox4tOn - 20 Января 2016 16:52
В общем, провел манипуляцию с оригинальным bootstrap и получилось. 

Код
     var c = function(a, b) {
        this.init("popover", a, b)
    };
    if (!a.fn.tooltip) throw new Error("Popover requires tooltip.js");
    c.VERSION = "3.3.5", c.DEFAULTS = a.extend({}, a.fn.tooltip.Constructor.DEFAULTS, {
        placement: "right",
        trigger: "click",
        content: "",
        template: '<div class="tipsy tipsy-w tipsy-hovercard" role="tooltip"><div class="tipsy-arrow tipsy-arrow-w"></div><div class="tipsy-inner"></h3><div class="tooltip-content"></div></div>'
    }), c.prototype = a.extend({}, a.fn.tooltip.Constructor.prototype), c.prototype.constructor = c, c.prototype.getDefaults = function() {
        return c.DEFAULTS
    }, c.prototype.setContent = function() {
        var a = this.tip(),
            b = this.getTitle(),
            c = this.getContent();
        a.find(".popover-title")[this.options.html ? "html" : "text"](b), a.find(".tooltip-content").children().detach().end()[this.options.html ? "string" == typeof c ? "html" : "append" : "text"](c), a.removeClass("tipsy tipsy-w tipsy-hovercard"), a.find(".popover-title").html() || a.find(".popover-title").hide()
    }, c.prototype.hasContent = function() {
        return this.getTitle() || this.getContent()
    }, c.prototype.getContent = function() {
        var a = this.$element,
            b = this.options;
        return a.attr("data-content") || ("function" == typeof b.content ? b.content.call(a[0]) : b.content)
    }, c.prototype.arrow = function() {
        return this.$arrow = this.$arrow || this.tip().find(".arrow")
    };
    var d = a.fn.popover;
    a.fn.popover = b, a.fn.popover.Constructor = c, a.fn.popover.noConflict = function() {
        return a.fn.popover = d, this
    }
}(jQuery)


Контент вывел сюда 
Код
data-content="описание"

Не знаю, насколько код валид, но работает.smile:)

Единственное, что пока что не получается сделать, так это вывести в этот блок еще один блок. Может дублировать код data-content ? Что скажете?
И еще. Когда блок доходит до конца слайдера, то как сделать чтобы Popover выпадал в другую сторону? Т.е конечный блок с контентом справа, а popover выпадает слева? placement auto right/left не получается  data-placement=" auto right"
Изменено: Sfox4tOn - 20 Января 2016 18:46
Можно закрывать. Проблему решил:)
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
09:26 Как продвигать сайт в mail.ru? 
08:45 Как раскрутить сайт? 
19:21 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
19:01 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
15:59 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы | Еженедельные Выплаты | CPA до $950 
13:14 2Index - быстрая индексация страниц сайта и обратных ссылок 
14:59 Партнерская программа OWNR WALLET 
10:51 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 
10:12 Sapfirex.com - Современный сервис обмена криптовалют 
23:01 Партнёрка для вебмастеров 
20:47 EasyBusy.bz Проводи обмены легко и быстро вместе с нами 
19:17 Johnny.Do | Обмен криптовалют с круглосуточной техподдержкой 
18:13 Ural-obmen.ru — выгодный сервис обмена 
16:48 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 
04:23 Точные прогнозы на футбол 
17:34 С юмором по жизни! 
08:11 Добро пожаловать в цифровой мир... 
20:36 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
09:45 Подтягиваем физкультурку 
15:02 Замедление скорости YouTube будет происходить по естественным причинам 
09:47 Китайцы создали себе национальный Linux, напичканный ИИ-функциями