JQuery прост ефект на подсказка

Опитвах се да намеря jquery tooltip ефект, но не можах да намеря това, от което се нуждая, така че започнах да пиша/модифицирам най-простия/близкия пример. Щракването където и да е на страницата трябва да скрие текущо отворената подсказка, освен ако не се щракне върху друга подсказка, в който случай текущо отворената подсказка ще бъде затворена и новата ще се отвори.

В момента щракването където и да е на страницата не прави нищо, защото има проблем с показването на подсказките. Щракването върху един съвет го показва добре, щракването върху следващия затваря първия и отваря втория, но след това, когато се щракне върху друг съвет, се показва празно поле.

Защо се случва това?

<!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="/bg#">tip1</a>
    <a title="message2" class="printbtn" href="/bg#">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