Простой tooltip - just the tip

Простой в использовании тултип Just The Tip, если вы конечно хотя бы немножко знаете html и javascript.
Подключаем в <head> необходимые файлы (отредактировать пути если понадобится)

<link rel="stylesheet" href="justthetip.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="justthetip.js"></script>

 

Чтобы использовать тултип нужно присвоить класс "jttrigger-" и определенный номер для ссылки, например

 

<a class="jttrigger-0" href="#">ссылка с подсказкой</a>


И задать в контейнере то, что будет у нас отображаться при наведении на ссылку - "Подсказка".

 

<div id="jttip-0" class="jttip" style="display:none;">
<div class="jttipcontent">
<p>Подсказка</p>
</div>
</div>

 

В диве с классом jttipcontent можно разместить и изображение и код видеоплейера.
В файле justthetip.js не забыть указать правильный путь до изображения - стрелочки nubbin.png

javascript

Вот сам javascript код тултипа:

var imageurl = "img/";

$(document).ready(function(){
           
    var mouseX = 0;
    var mouseY = 0;
    $().mousemove( function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    });
    
    $(".jttip").hover(
        function () {
            id = $(this).attr('id');
           
            split = id.split('-', 2)
            number = split[1];
           
            clearTimeout(window['ta' + number]);
            $('#'+id).show();
      
        },
        function () {
           
            id = $(this).attr('id');
            $('#'+id).fadeOut('fast');
           
        }
    );
    
    $(".jttip").each(function (i) {
        var prepend$$i = 0;
       
        $("#jttrigger-"+i).hover(
          function () {
           
            if(prepend$$i == 0)
            {
                $("#jttip-"+i).prepend('<img class="nubbin" src="'+imageurl+'nubbin.png" alt="arrow" height="13" width="27">');
                prepend$$i = "done";
            }
           
            var triggerPos = $("#jttrigger-"+i).position();
            var jttipPos = $("#jttip-"+i).position();
            var triggerHeight = $("#jttrigger-"+i).height();
            var triggerWidth = $("#jttrigger-"+i).width();
           
              var jttipWidth = $("#jttip-"+i).width();
             
              var offsetX = triggerWidth-jttipWidth;
             
              $("#jttip-"+i).css('top',triggerPos.top+triggerHeight);
             
              if(offsetX > 0)
              {
                  $("#jttip-"+i).css('left',triggerPos.left-(offsetX/2));
              }
              else
              {
                  $("#jttip-"+i).css('left',triggerPos.left+(offsetX/2));
              }
             
              window['t' + i] = setTimeout(function() { $("#jttip-"+i).fadeIn('fast'); },300);
           
          },
          function () {
               
                clearTimeout(window['t' + i]);

                if($("#jttip-"+i).css("display") == 'block')
                {
                    window['ta' + i] = setTimeout(function() { $("#jttip-"+i).hide(); },300);
                }

          });
         
        });
   
});

СКАЧАТЬСкачек: 708
180,72 Kb
Кто скачал?

ДЕМОПосмотреть
пример