jqueryui-tooltip's Introduction

jqueryui-tooltip

based on jqueryui toolitp, fix the bug of arrow position #目的修复当整个tooltip距离右边为负时，即放不下时，整个tooltip需要左移到刚好能放下为止，此时toolttip下面的小尾巴会定位有问题。原生插件只提供了定位在左边20%和中间位置的定位，这里进行了修改使得右边放不下时小尾巴定位到target的地方。 css样式很神奇，定位超出页面界限可能引起元素的宽度发生变化。 #如何使用

// js
$('.jq-tooltip').tooltip({
        position: {
          my: 'center bottom-20',
          at: 'center top',
          using: function( position, feedback ) {
            $( this ).css( position );
            $( '<div>' )
              .addClass( 'tooltip-arrow' )
              .addClass( feedback.vertical )
              .appendTo( this );
              var left = feedback.target.left - feedback.element.left;
              var right =  left + feedback.target.width - feedback.element.width;
              var extrClass = '';
              if (right > 0) {
                  extrClass += (left > 0 ? 'right' : 'center');
                  $(this).find('.tooltip-arrow').addClass(extrClass);
              } else {
                  $(this).find('.tooltip-arrow').css({
                      left: 'auto', //覆盖原生的left定位值
                      right: feedback.element.width - left - 35 - 3 - feedback.target.width/2 + 'px' // 35为小尾巴一半的宽度
                  });
              }
          }
        }
    });

Recommend Projects