The code below shows a tooltip when hovering over links. For some reason, I can't limit the width of the link inside of the div, so the hover effect happens at any point along the width of the parent div, which isn't what I want. I want the hover effect to be limited to the width of the link's text.
.show {
position: relative;
}
.show a {
max-width: 20%;
}
.show .tooltip {
/*visiblity: hidden; */
display: none;
position: absolute;
top: 0;
left:5%;
margin-top: -30px; /* approx adjustment for arrow */
margin-left: 25px; /* approx adjustment for arrow */
}
.show a:hover + .tooltip,
.show a:focus + .tooltip {
cursor: pointer;
display: block;
/*visibility: visible; */
width: 75%;
line-height: 20px;
padding: 8px;
font-size: 14px;
text-align: center;
z-index: 999;
color: rgb(113, 157, 171);
background: rgb(255, 255, 255);
border: 4px solid rgb(255, 255, 255);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
box-shadow: #333 -4px 4px 16px 2px;
-webkit-transition: opacity 100ms ease-in;
-o-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.show .tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 22px;
left: -23px;
}
a {
max-width: 20%;
max-width: 20vw;
}<div class="lev2">
<div class="show">
<a href="javascript:void(0)"><h3>Link</h3></a>
<div class="tooltip">
<h2>h2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>Edit: Switching the a or h3 element to inline block changes the dimensions of the div, giving an unwanted margin and/or padding. Setting margin/padding of all elements involved to 0 doesn't resolve this.
Before:
After:
