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

Question

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

-2

У меня есть код jQuery, который динамически создает элемент image и li на лету. Я хочу использовать всплывающую подсказку bootstrap, чтобы, когда моя мышь находится над этим изображением, детали этого изображения должны отображаться в отдельной всплывающей подсказке, как всплывающее окно, но используя всплывающую подсказку. Однако я не могу понять, где это происходит. Вот мой код:

   $.ajax({
            url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=XXXXXXXX&q=" + name + "&page_limit=5",
            dataType: "jsonp",
            success: function (response) {
                $(".display-movie").empty();
                var ul = $(".display-movie");
                console.log(response);
                for (var i = 0; i < response.movies.length; i++) {

                    var astart = $("<a>").attr("href", "#")
                                     .attr("rel", "tooltip")
                                     .append(img);
                    var img = $("<img>").attr("src", response.movies[i].posters.thumbnail)
                                        .css({
                                            width: 200,
                                            height: 200,
                                            margin: 20
                                        }).mouseover(function () {
                                            $("[rel='tooltip']").tooltip();
                                        })
                                          .append(aend);

                    var aend = $("</a>");
                    var div = $("<div></div>")
                        .append(astart)
                        .append(response.movies[i].title);
                    $("<li></li>")
                        .append(div)
                        .appendTo(ul);
                }
            }
        });

user3291389 11 фев. 2014, в 02:47

Источник

0

Вы, похоже, не извлекли уроки из своего другого вопроса.
Salman A 11 фев. 2014, в 04:56

Теги:

javascript

jquery

twitter-bootstrap

2 ответа

1

Вы добавляете элемент неправильно. Попробуй это:

$.ajax({
    url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=48fv438wmjsh44bqutgd3gzn&q=" + name + "&page_limit=5",
    dataType: "jsonp",
    success: function(response) {
        $(".display-movie").empty();
        var ul = $(".display-movie");
        var ul_string = '';
        console.log(response);
        for (var i = 0; i < response.movies.length; i++) {
            ul_string +=
                '<li>' +
                    '<div>' +
                        '<a href="#" rel="tooltip">' +
                            '<img src="' + response.movies[i].posters.thumbnail + '" />' +
                        '</a>' +
                        response.movies[i].title +
                    '</div>' +
                '</li>';
        }

        ul.append(ul_string);
        ul.find('img').css({
            width: 200,
            height: 200,
            margin: 20
        });
        ul.find('[rel="tooltip"]').tooltip();
    }
});

ducdhm 11 фев. 2014, в 02:58

Ещё вопросы

Вы, похоже, не извлекли уроки из своего другого вопроса.

marionebl · Accepted Answer · 2014-02-11T03-14-00.000Z

Вы можете использовать делегирование

var $movieDisplay = $(".display-movie");
$movieDisplay.tooltip({
  selector: '[rel=tooltip]'
});

$.ajax({
  url: 'http://host.tld',
  success: function(response) {
    // Use $movieDisplay here to avoid selecting it over and over again
    $movieDisplay.empty();
    ...
  }
});

Преимущества:

Меньше слушателей событий, более высокая производительность
Каждый элемент в $movieDisplay с rel='tooltip' покажет всплывающую подсказку, независимо от того, был ли он создан после или до вызова tooltip(options)

Смотрите в действии:

http://jsfiddle.net/marionebl/P6XK5/1/

Почему вы создали переменную var $movieDisplay = $(".display-movie"); если вы просто собираетесь использовать то же самое в следующей строке? Просто сделайте это $(".display-movie").tooltip({...
$movieDisplay можно (и нужно!) использовать в $.ajax вызове для вызова $.ajax . Сделано это понятнее, добавив несколько строк обратного вызова.