A unique pure css popup was crafted by merging and . Hovering over "John Smith" triggers the appearance of the popup. The code for this can be seen at http://codepen.io/kikibres/pen/MwEgQX.
However, there are some challenges being faced. The aim is to keep everything aligned to the right side of the page while remaining within the designated container. Attempts were made by removing the
"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;
}
The current code allows the popup to function but results in overflowing elements. A modified version of the code that maintains proper boundaries can be found at http://codepen.io/kikibres/pen/BNwaGq. It is imperative that no Javascript is utilized for this solution.
Further investigation revealed that the floats in a.tooltip span and a.tooltip h2 could impact the layout, potentially causing elements to overflow their containers. Additionally, it was observed that eliminating the float:right property from a.tooltip h2 rectified most issues except for the full-width bottom border which may require alternative solutions. Reference to addressing this issue can be accessed via Is it possible to extend a h2 box in CSS depending on the text within it?. The updated code can also be viewed at http://codepen.io/kikibres/pen/RPLwmy