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額外寬度問題

回答

相關問題