jQuery UI ToolTip余分な幅の問題

Question

jQuery UIツールチップを使用していますが、いくつかの画像にカーソルを合わせると有効になります。私はこの質問に絵を付けました。ピンクの後に見える白い余白は余分です。それがなぜ形成されているのか？ 私はそれの背後にある理由を得るために過去数時間苦労しています。 tooltip example `HTML：これは私のHTMLコンテンツ です：

CSS: My CSS rules 
.ui-tooltip { 
     padding: 1em; 
     border: 2px solid $colorBrown; 
     color: $colorBrown; 
     margin: 0; 
    } 

    .ui-tooltip-content { 
     padding: 1em; 
     color: $colorWhite; 
     background: $colorBrown; 
    } 

    .ui-tooltip-content::after { 
     content: ''; 
     position: absolute; 
     border-style: solid; 
     display: block; 
     color: $colorBrown; 
    } 

    .top .ui-tooltip-content::after { 
     bottom: -10px; 
     left: 70px; 
     border-color: $colorBrown transparent; 
     border-width: 10px 10px 0; 
    } 

    JS: The JS function that initiates tooltip 
    function toolTipInit() { 
     $('.social-icons span').tooltip({ 
      items: 'a.whatsapp, a.skype', 
      content: function() { 
       return $(this).data('content'); 
      }, 
      show: null, 
      position: { 
       my: 'center bottom', 
       at: 'center top-50' 
      }, 
      tooltipClass: 'top', 
      open: function(event, ui) { 
       if (typeof(event.originalEvent) === 'undefined') { 
        return false; 
       } 
      }, 
      close: function(event, ui) { 
       ui.tooltip.hover(function() { 
         $(this).stop(true).fadeTo(400, 1); 
        }, 
        function() { 
         $(this).fadeOut('400', function() { 
          $(this).remove(); 
         }); 
        }); 
      } 
     }); 
    } 
    ` 

Answer 1

使用カスタムCSSで重要なことは、デフォルトのUIのCSSを上書きすることができるように！。私はそれが助けると思う。

例：

padding:0 !important;