Tooltip cutoff at the edge of the containing element - css

Question

I have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?

Answer 1

you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}

Answer 2

I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript