jQuery UI ToolTip Extra Breite Problem

Question

Ich benutze jQuery UI Tooltip, die aktiviert ist, wenn ich den Mauszeiger über ein paar Bilder. Ich habe dieser Frage ein Bild beigefügt. Der weiße Rand, den wir nach dem Pink sehen, ist extra. Irgendeine Idee, warum es gebildet wird? Ich kämpfe in den letzten paar Stunden um den Grund dafür zu finden. tooltip example `HTML: Das ist mein HTML-Inhalt :

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

Verwendung wichtig in Ihrem benutzerdefinierten CSS, so dass es den Standard-ui CSS außer Kraft setzen kann. Ich denke, es wird helfen.

Ex:

padding:0 !important;