0

Есть tooltip для нескольких изображений, нужно добавить setTimeout, чтобы подсказка при наведении появлялась не сразу.

/* tooltip */

this.screenshotPreview = function()
{
    xOffset = 370;
    yOffset = -280; // center
    s_width = 624;
    s_min = 300;

    function set_x ( mouse_y )
    {
        if(mouse_y<375) // top margin
        {
            xOffset=-35;
        }
        else
        {
            xOffset=315; // должен быть больше "style=\'height: 300px"
        }
    }

    $('a.screenshot-preview').hover(

        function(e)
        {
            this.t = this.title;
            this.title = '';
            var c = ( this.t !== '' ) ? '<br />' + this.t : '';

            $('body').append( '<p id="screenshot"><img src="' + $(this).attr('data-preview') + '" alt="url preview" style=\'width: 590px; height: 300px;\' />'+ c +'</p>' );

            var document_width = $(document).width(),
                remander = document_width - ( ( e.pageX + yOffset ) + s_width );

            if ( e.pageX <= s_min )
            {
                $('#screenshot').css( 'left', '0px' );
            }
            else
            {
                if ( remander <= -1 )
                {
                    $('#screenshot').css( 'left', ( document_width - s_width ) + 'px' );
                }
                else
                {
                    $('#screenshot').css( 'left', ( e.pageX + yOffset ) + 'px' );
                }
            }

            set_x( e.clientY );

            if ( e.clientY <= xOffset )
            {
                jQuery('#screenshot').css( 'top', ( e.pageY + ( xOffset ) ) + 'px' );
            }
            else
            {
                $('#screenshot').css( 'top', ( e.pageY - xOffset ) + 'px' );
            }

            $('#screenshot').fadeIn( 'fast' );

        },

        function()
        {
            this.title = this.t;

            $("#screenshot").remove();
        }
    );

    $('a.screenshot-preview').mousemove(

        function(e)
        {
            var document_width = $(document).width(),
                remander = document_width - ( ( e.pageX + yOffset ) + s_width );

            if ( remander >= 1 && e.pageX > s_min )
            {
                $('#screenshot').css( 'left', ( e.pageX + yOffset ) + 'px' );
            }

            set_x( e.clientY );

            $('#screenshot').css( 'top', ( e.pageY - xOffset ) + 'px' );
        }

    );

};
// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

Демо https://jsfiddle.net/n3khxp7s/3/

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 25 янв 2016 в 5:09

1 ответ 1

1

Как вариант - можно обернуть блоки кода, расположенные в функциях метода hover таймаутом

/* tooltip */

this.screenshotPreview = function() {
  xOffset = 370;
  yOffset = -280; // center
  s_width = 624;
  s_min = 300;
  timeout = null;

  function set_x(mouse_y) {
    if (mouse_y < 375) // top margin
    {
      xOffset = -35;
    } else {
      xOffset = 315; // должен быть больше "style=\'height: 300px"
    }
  }

  $('a.screenshot-preview').hover(

    function(e) {

      $this = this;
      this.t = this.title;
      this.title = '';
      var c = (this.t !== '') ? '<br />' + this.t : '';

      timeout = setTimeout(function() {

        $('body').append('<p id="screenshot"><img src="' + $($this).attr('data-preview') + '" alt="url preview" style=\'width: 590px; height: 300px;\' />' + c + '</p>');

        var document_width = $(document).width(),
          remander = document_width - ((e.pageX + yOffset) + s_width);

        if (e.pageX <= s_min) {
          $('#screenshot').css('left', '0px');
        } else {
          if (remander <= -1) {
            $('#screenshot').css('left', (document_width - s_width) + 'px');
          } else {
            $('#screenshot').css('left', (e.pageX + yOffset) + 'px');
          }
        }

        set_x(e.clientY);

        if (e.clientY <= xOffset) {
          jQuery('#screenshot').css('top', (e.pageY + (xOffset)) + 'px');
        } else {
          $('#screenshot').css('top', (e.pageY - xOffset) + 'px');
        }

        $('#screenshot').fadeIn('fast');
      }, 500);
    },

    function() {

      clearTimeout(timeout);
      this.title = this.t;

      $("#screenshot").remove();
    }
  );

  $('a.screenshot-preview').mousemove(

    function(e) {

      var document_width = $(document).width(),
        remander = document_width - ((e.pageX + yOffset) + s_width);

      if (remander >= 1 && e.pageX > s_min) {
        $('#screenshot').css('left', (e.pageX + yOffset) + 'px');
      }

      set_x(e.clientY);

      $('#screenshot').css('top', (e.pageY - xOffset) + 'px');
    }

  );

};
// starting the script on page load
$(document).ready(function() {
  screenshotPreview();
});

https://jsfiddle.net/om9bdtwy/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.