Эффект простой всплывающей подсказки JQuery

Я пытался найти эффект всплывающей подсказки jquery, но не мог найти то, что мне нужно, поэтому я начал писать / изменять самый простой / ближайший пример. Щелчок в любом месте страницы должен скрыть текущую открытую всплывающую подсказку, если не щелкнуть другую всплывающую подсказку, и в этом случае текущая открытая всплывающая подсказка будет закрыта, а новая будет открыта.

В настоящий момент щелчок в любом месте страницы ничего не делает, потому что есть проблема с отображением всплывающих подсказок. Щелчок по одной подсказке отображает ее нормально, нажатие на следующую закрывает первую и открывает вторую, но после этого, когда щелкают другую всплывающую подсказку, отображается пустое поле.

Почему это происходит?

<!DOCTYPE html>
<html>

<head>
<script type='text/javascript' src='jquery-1.6.2.js'></script>

<style type='text/css'>
    .tooltip{ 
        display:none;
        padding:5px 10px;
        background-color:#e5f4fe;
        border:#5a5959 1px solid;
        position:absolute;
        z-index:9999;
        color:#0c0c0c;
        width:100px;
        height:50px;
    }

</style>

<script type='text/javascript'>
    $(window).load(function(){
    $(document).ready(function() {

    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>'); 

    var tip;

    $('a[title]').click(function(e) {

        //display tip
        tip = $(this).attr('title'); // tip = this title   
        $(this).attr('title','');    // empty title
        $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip ); // fade tooltip and populate .tipBody

        //set position
        $('.tooltip').css('top',  e.pageY);
        $('.tooltip').css('left',  e.pageX);

     });

  });

});

</script>


</head>
<body>
     <a title="message1" class="printbtn" href="#">tip1</a>
    <a title="message2" class="printbtn" href="#">tip2</a>
</body>
</html>

html jquery css tooltip
person user1334130    schedule 19.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно добавить прослушиватель событий для щелчка по телу, используя объект события, проверить цель, если это ваша активная всплывающая подсказка, в противном случае закройте всплывающую подсказку.

$('body').on('click', function (e) {
  if (!$(e.target).hasClass('tooltip')) {
     // hide your tooltip
  }
});

пример: http://jsfiddle.net/xRNnP/

если щелкнуть в любом месте, текст будет скрыт, если щелкнуть сам текст, ничего не произойдет.

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

person Mark    schedule 19.09.2012