Помогите настроить 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
Можно закрывать. Проблему решилsmile:)
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
09:05 Telegram введет монетизацию для владельцев каналов 
02:40 На каком движке проще всего организовать образовательный сайт для детей? 
18:52 Хочу ИКС 1000 сколько нужно вложить в сайт? 
18:40 АП ИКС 13.08.2022 | Апдейт Яндекс ИКС 13 августа 2022 
16:33 Откуда мейл берет адрес компании? 
16:31 alex rank 
12:19 Занять высокие позиции в Гугл 
08:40 Transit-Bit.com - Обмен USDT на IDR, THB, RUB и наличные 
11:59 Google Voice - OLD аккаунты "SMS и звонки" 
11:56 Affiliate Top - партнерская программа нового уровня 
22:39 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc 
18:34 Ural-obmen.ru — выгодный сервис обмена 
18:27 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 
18:07 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 
09:03 Курс доллара упал ниже 85 рублей 
08:59 ФАС сделала замечания "Яндекс Такси" из-за цен 
04:33 Точные прогнозы на футбол 
22:19 37 противникам прививок от COVID грозят уголовные дела 
21:42 "Пенсия" вас поджидает за углом 
12:01 С юмором по жизни! 
19:39 Добро пожаловать в цифровой мир...