純Css彈出和容器邊距

我通過將http://www.menucool.com/tooltip/css-tooltip和http://cssarrowplease.com/組合在一起創建了一個純css彈出窗口。當您懸停在「John Smith」上時，會彈出一個對話框。您可以在http://codepen.io/kikibres/pen/MwEgQX處看到此代碼。純Css彈出和容器邊距

但是，我有問題。我希望將所有內容都保留在頁面的右側，並保留在容器中。我試圖通過從.quotename中刪除"overflow: hidden; height: auto;"來進行編輯。當刪除時，彈出窗口工作，但它是超出界限。添加代碼時，代碼處於綁定狀態，但彈出窗口不起作用，因爲它溢出了其邊界。我如何解決它？

HTML

<div class="testimonials"> 
     <div class="container"> 
      <div class="quotename"> 
       <a href="#" class="tooltip"> 
       <span><h3>Mini profile</h3>Lorem ipsum dolor sit amet, consect etur adipiscing elit.</span> 
       <h2>John Smith</h2></a> 
      </div> 
     </div> 
    </div>

CSS

.testimonials { background-color: #e7d6e9; padding: 30px 0;} 
.container { width: 90%; margin-left: auto; margin-right: auto; background-color: #e9e9e9;} 
.quotename { margin: 20px 0; position: relative; /*overflow: hidden; height: auto;*/} 
a.tooltip {outline:none;} 
a.tooltip h2 { text-decoration: none; border-bottom: 2px solid #00acb6; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 20px; color: #00acb6; float: right; width: auto; margin: 0;} 
a.tooltip strong {line-height:30px;} 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { 
    display:none; 
    padding:14px 20px; 
    margin-top:-120px; 
    margin-right: -8px; 
    width:150px; 
    line-height:16px; 
    background: #e9e9e9; 
    height: 70px; 
    position: relative; 
    float: right; 
} 
a.tooltip span h3 { margin:0;} 
a.tooltip span:after, a.tooltip span:before { 
    top: 100%; 
    left: 75%; 
    border: 3px solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 
a.tooltip span:after { 
    border-color: rgba(0, 172, 182, 0); 
    border-top-color: #e9e9e9; 
    border-width: 10px; 
    margin-left: -10px; 
} 
a.tooltip span:before { 
    border-color: rgba(0, 172, 182, 0); 
    border-top-color: #00acb6; 
    border-width: 14px; 
    margin-left: -14px; 
} 
a.tooltip:hover span{ 
    display:inline; position:relative; color:#111; 
    border: 3px solid #00acb6; background: #e9e9e9; border-radius: 6px;} 
a.tooltip span 
{ 
    border-radius: 6px; 
    border: 3px solid #00acb6; 
}

這是在彈出的作品，但一切都是越界的代碼。您還可以看到第二個代碼中的所有內容都處於綁定狀態，但彈出式窗口不在http://codepen.io/kikibres/pen/BNwaGq處。請確保沒有涉及Javascript。

我也做了一些消除方法，發現a.tooltip span和a.tooltip h2中的浮點數也會影響代碼，因爲使用浮點數可以使內容超出邊界或類似的範圍。

更新-
我認爲問題在於a.tooltip h2。如果我從班級中刪除浮動：除了100％寬的下邊框之外，所有東西都可以工作。我使用Is it possible to extend a h2 box in CSS depending on the text within it?的代碼來解決這個問題，因爲我想在下劃線和文本之間留出空間，但顯然這個代碼影響了整個事情。新的代碼是從a.tooltip span{}這個類http://codepen.io/kikibres/pen/RPLwmy

來源

2015-06-18 Kristina Bressler