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

0

На моем сайте я использую узлы DOM класса = "триггер" в качестве якорей для всплывающих подсказок. Когда мотив наводит эти якоря, появляется всплывающая подсказка. Код jQuery, создающий контейнер всплывающей подсказки, выглядит следующим образом:

$('.trigger').mouseover(function() // OnMouseOver event
{
    $("<div/>", {
        id: "tooltip",
        css: {
            display: "none",
            position: "absolute",
            border: "3px solid #111",
            color: "#000",
            padding: "5px",
            opacity: 1.0,
            fontSize: "15pt",
            backgroundColor: "#fff",
            borderRadius: "15px",
            zIndex: 3000
        }
    }).appendTo(this);

    $("#tooltip").html($(this).attr('title'));
    $(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
    $('#tooltip').show(); // show the tooltip
}).mousemove(function(e) // OnMouse mode event
{
    $('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
    $('#tooltip').css('left', e.pageX - 20);    // tooltip with mouse pointer   
}).mouseout(function() // OnMouseOut event
{
    $(this).attr('title',$('#tooltip').html()); // set the title back to initial value
    $(this).children('div#tooltip').remove();   // get rid of the tooltip container 
});

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

$("<img/>", {
    id: "arrowup",
    class: "trigger noprint",
    css:{
        display:"none",
        position:"fixed",
        bottom:'15px',
        right:'10px',
        cursor: "pointer"
    },
    src:"../images/arrowup.jpe",
    alt:"vers le haut",
    title: "Haut de la page",
    click:function(){
        $("html, body").animate({scrollTop: "0px"}, 800);
        return false;                       
        }
    }).appendTo("body");
$(window).bind("scroll", function() {
    var obj = $("#arrowup");

    if ($(this).scrollTop() > 300){ 
        obj.fadeIn(800);
    } else { 
        obj.fadeOut(800);
    }
});

Это нормальное поведение или есть трюк, чтобы получить всплывающую подсказку, отображаемую нормально?

  • 0
    Во втором фрагменте кода у вас нет .show() ;)
  • 1
    На самом деле, следующий код должен быть добавлен. Как видите, он показывает, но только при прокрутке страницы.
Показать ещё 2 комментария
Теги:

4 ответа

0
Лучший ответ

На моем сайте я использую узлы DOM класса = "триггер" в качестве якорей для всплывающих подсказок. Когда mouve наводит эти якоря, всплывающая подсказка отображает и перемещается с движением мыши. Код jQuery, создающий контейнер всплывающей подсказки, был изменен следующим образом:

$("#template").on("mouseover", ".trigger", function(){ // OnMouseOver event

    $("<div/>", {
        id: "tooltip",
        css: {
            display: "block",
            position: "absolute",
            border: "3px solid #111",
            color: "#000",
            padding: "5px",
            opacity: 1.0,
            fontSize: "15pt",
            title: "XXX",
            backgroundColor: "#fff",
            borderRadius: "15px",
            zIndex: 3000
        }
    }).appendTo("body");

    $("#tooltip").html($(this).attr('title'));
    $(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
    $('#tooltip').show(); // show the tooltip
}).on("mousemove", ".trigger", function(e){ // OnMouse mode event
    $('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
    $('#tooltip').css('left', e.pageX - 20);    // tooltip with mouse pointer   
}).on("mouseout", ".trigger", function(){ // OnMouseOut event
    $(this).attr('title',$('#tooltip').html()); // set the title back to initial value
    $("body").children('div#tooltip').remove(); // get rid of the tooltip container 
});

Следуя предложению Эдварда, все $ (". Trigger"). Event (function() {...}); были заменены на $ ("# parent".on("event", ".trigger", function() {...}), так что jQuery будет знать динамическое добавление контента в DOM после готовности DOM. содержимое создается следующим образом:

    $("<div/>", { // creates a container <div> for the arrowup image
    id: "arrowup",
    class:"trigger no_underline", // is an anchor for tooltip
    css:{
        display:"none",
        position:"fixed",
        bottom:"30px",
        right:"30px",
        cursor: "pointer"
    },
    click:function(){ // assign page up functionality
        $("html, body").animate({scrollTop: "0px"}, 800);
        return false;                       
        },
    title: "Haut de page" // title to be passed to the tooltip
    }).appendTo("#template");

$("<img/>", { // creates the image and its functionality 
    src:"../images/arrowup.jpe",
    alt:"vers le haut",
    }).appendTo("#arrowup");

$(window).bind("scroll", function() { // shows tooltip only when page is scrolled
    var obj = $("#arrowup");
    if ($(this).scrollTop() > 300){ 
        obj.fadeIn(800);
    } else { 
        obj.fadeOut(800);
    }
});

В исходных списках каждому из.trigger были предоставлены индивидуальные инструкции. Если будет создан новый.trigger, они не будут слышать инструкцию и не будут реагировать на события mouseover, mousemove и mouseout, каждый из которых несет прямую ответственность за свои собственные события. В измененной настройке только команде (здесь #template) дана инструкция; он несет ответственность за замещение событий от имени своих дочерних элементов. Работа по уловкам была делегирована.

Ссылаясь на комментарий Александра, в моем вопросе я привязывался к позиции привязки, тогда как теперь я привязываюсь к позиции курсора во время стрельбы всплывающей подсказки: это поведение, которое я ожидал. 3

Когда я задал вопрос, я полагал, что неотображение всплывающей подсказки было связано с тем, что новый элемент вышел из нормального потока (позиция: исправлена). Это совсем не так.

Теперь все работает так, как ожидалось! Спасибо всем, кто мне помог.

Поделиться
1

Если я правильно понял ваш вопрос, вам нужно обернуть изображение с помощью фиксированного div:

<div class="fixed">
    <img src="http://placehold.it/150x150">
    <div class="tooltip">Tooltip</div>
</div>

И CSS:

.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.tooltip {
    position: absolute;
    left: -50px;
    top: 0;
    display: none;
}

.fixed:hover .tooltip {
    display: block;
}

Проверить JSFiddle

Наведите указатель мыши на заполнитель, чтобы увидеть подсказку.

Поделиться
  • 0
    Я использовал решение, предложенное Александром, и оно работает. Подсказка показывает. Однако это решение CSS, а не решение jQuery.
  • 0
    Хорошо, я добавлю полное решение завтра
0

Следующий код работает!

$('.trigger').mouseover(function(){ // OnMouseOver event
    $("<div/>", {
        id: "tooltip",
        css: {
            display: "block",
            position: "absolute",
            border: "3px solid #111",
            color: "#000",
            padding: "5px",
            opacity: 1.0,
            fontSize: "15pt",
            title: "XXX",
            backgroundColor: "#fff",
            borderRadius: "15px",
            zIndex: 3000
        }
    }).appendTo("body");

    $("#tooltip").html($(this).attr('title'));
    $(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
    $('#tooltip').show(); // show the tooltip
}).mousemove(function(e) // OnMouse mode event
{
    $('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
    $('#tooltip').css('left', e.pageX - 20);    // tooltip with mouse pointer   
}).mouseout(function() // OnMouseOut event
{
    $(this).attr('title',$('#tooltip').html()); // set the title back to initial value
    $("body").children('div#tooltip').remove(); // get rid of the tooltip container 
});

и обратите внимание, что единственная сделанная модификация заключается в том, что всплывающая подсказка div # теперь находится в теле, а не как дочерний элемент ее привязки.

Почему это заставляет его работать? Я действительно не знаю.

Поделиться
  • 0
    Вы реализовали другое поведение: 1. в своем вопросе вы привязываетесь к позиции привязки; 2. в своем ответе вы привязываетесь к положению курсора во время срабатывания всплывающей подсказки. Вам все еще нужен пример кода с первым реализованным поведением?
  • 0
    В моем вопросе jQuery динамически создает img # arrowup.trigger. Событие mouseover для .trigger динамически создает div # tooltip и добавляет его к img # arrowup, пустому тегу, который не может иметь никакого содержимого (кроме самого изображения). Может ли это быть реальной причиной, по которой всплывающая подсказка не отображается?
Показать ещё 1 комментарий
0

Когда вы динамически добавляете контент на страницу после загрузки dom, вам нужно сообщить javascript, что вы это сделали.

Это делается путем распространения событий. Если триггеры содержатся в родительском div, выполните следующие действия:

$('#parent').on('mouseover', '.trigger', function() {

//your code here.

});
Поделиться
  • 0
    Код, указанный в моем вопросе, некорректен. Он пытается дать <img> ребенка <div>. Исправленный! 2 новых элемента на лету. Нужно использовать ваше предложение. Я делаю это. Странные результаты! Нажмите на различные триггеры и во втором или третьем испытании содержание всплывающей подсказки исчезнет. $ (это) не выполняется должным образом. Это очень запутанно! Кто такой $ (этот)?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню