jQuery UI ToolTip额外宽度问题

我使用的是jQuery UI工具提示，当我将鼠标悬停在几张图片上时，这个工具提示被启用。我为这个问题附上了一张图片。我们在粉红色之后看到的白色边缘是额外的。任何想法为什么它正在形成？我在过去几个小时努力寻找它背后的原因。 tooltip example `HTML：这是我的HTML内容：jQuery UI ToolTip额外宽度问题

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(); 
         }); 
        }); 
      } 
     }); 
    } 
    `

来源

2016-07-22 Shashank Suresh

我没有看到你在你的问题中引用的图片。你可以再次添加它吗？ –

对不起。我现在已附上照片。 –

使用您的自定义CSS重要的，以便它可以覆盖默认UI CSS。我认为这会有所帮助。

例：

padding:0 !important;

来源

2016-07-22 12:17:22

我可以是多么愚蠢？我一直在研究这么多年，但却陷入了这些基本的东西。无论如何，！重要的工作得很好。非常感谢你的朋友:) –

发生某个时候:) 不断询问并放弃正确答案投票：P –

是的，有时会发生。一旦堆栈溢出让我投票。 –

jQuery UI ToolTip额外宽度问题

回答

相关问题