Make text box appear to the right of wrapper/clip-path - html

Question

I have based my code out of this CSS Shapes Layout Pyramid from codepen: https://codepen.io/s-gupta/pen/jOMGbMX
I'm quite happy with the shape of my pyramid, but I also want a text box to appear to the right of each pyramid step when you hover over the element. I based my text box code on https://www.w3schools.com/css/css_tooltip.asp
However, as you see, the text box appears within the wrapper/pyramid, not outside of it. The text in the text box will be quite long, so it cannot be within the pyramid.
How can I make it go outside (and preferably to the right of the pyramid) ?
I'm quite new to CSS/HTML, but I'm trying to learn - Hope somebody out there can help me :)
body {
/*background: #333;
font-family: "SF UI Text", "Avenir", "Helvetica", arial, san-serif;
color: #888;*/
}
.wrapper {
margin: 5vh auto 0;
}
.pyramid {
float: left;
shape-outside:polygon(310px 0px, 130px 405px, 558px 405px);
padding-right:60px;
width: 700px;
height: 500px;
}
.zone {
padding:40px 0;
margin: 0 auto;
text-align:center;
color: black;
background-blend-mode:darken;
transition: 0.5s;
}
.zone:nth-child(1){
background:rgba(248,153,46); /* url("https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg") center / cover;*/
width: 20%;
clip-path:url("#part1");
clip-path:polygon(50% 0%,0%,100% 100%, 0% 100%);
/*-webkit-clip-path:polygon(50% 0%,100% 100%, 0% 100%);*/
}
.zone:nth-child(2){ background:rgba(248,153,46);
width: 40%;
clip-path:url("#part2");
clip-path:polygon(40% 0%,0%,60% 0, 100% 100%,0% 100%);
/*-webkit-clip-path:polygon(25% 0%,75% 0, 100% 100%,0% 100%);*/
}
.zone:nth-child(3){
width: 60%;
background:rgba(248,153,46);
clip-path:url("#part3");
clip-path:polygon(30% 0,0%, 70% 0, 100% 100%,0% 100%);
/*-webkit-clip-path:polygon(16.5% 0, 83% 0, 100% 100%,0% 100%);*/
}
.zone:nth-child(4){
background:rgba(248,153,46);
width: 80%;
clip-path:url("#part4");
clip-path:polygon(20% 0, 0%,80% 0, 100% 100%,0% 100%);
/*-webkit-clip-path:polygon(12.5% 0,87.5% 0, 100% 100%,0% 100%);*/
}
.zone:nth-child(5){
background:rgba(248,153,46);
width: 100%;
clip-path:url("#part5");
clip-path:polygon(10% 0, 0%,100% 0, 100% 100%,0% 100%);
/*-webkit-clip-path:polygon(12.5% 0,87.5% 0, 100% 100%,0% 100%);*/
}
/*.zone:hover {
background-color: rgba(118,113,113);
color: white;
}
*/
.zone .arrowtext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
top: -5px;
left: 105%;
}
.zone .arrowtext::after {
content: " ";
position: relative;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.zone:hover {
background-color: rgba(118,113,113);
color: white;
}
.zone:hover .arrowtext{
visibility: visible;
}
<div class="wrapper">
<div class="pyramid">
<div class="zone">0. zero
<span class="arrowtext">Tooltip text</span></div>
<div class="zone">1. One</div>
<div class="zone">2. Two</div>
<div class="zone">3. Three</div>
<div class="zone">4. Four</div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="part1" clipPathUnits= "objectBoundingBox">
<polygon points= "0.5 0, 1 1, 0 1"/>
</clipPath>
<clipPath id="part2" clipPathUnits= "objectBoundingBox">
<polygon points= "0.25 0,0.75 0, 1 1, 0 1"/>
</clipPath>
<clipPath id="part3" clipPathUnits= "objectBoundingBox">
<polygon points= "0.165 0,0.83 0, 1 1, 0 1"/>
</clipPath>
<clipPath id="part4" clipPathUnits= "objectBoundingBox">
<polygon points= "0.125 0,0.875 0, 1 1, 0 1"/>
</clipPath>
<clipPath id="part5" clipPathUnits= "objectBoundingBox">
<polygon points= "0.1 0,0.9 0, 1 1, 0 1"/>
</clipPath>
</defs>
</svg>
And further, how could I make the arrowtext go over several sentences? I figured I can make the width wider and reduce the clip path so that the triangle takes up less of the area. That solves the problem of making whole 1-2 lines visible, but what about getting text that goes over 2 lines? I've tried z-index for example, but does not work. In other words I'm looking for a way to make the text expand further than only the height of the hovered element or zone.

Answer 1

Here is a simplified version where I am reducing the size for the sake of the demo (feel free to update them).
The trick is to create triangle shapes using pseudo element on each "zone" element. By making them relative to "pyramid" they will overlap (creating the illusion of only one). Then by using clip-path:inset(0) on "zone" each one will show one portion on the triangle.
.pyramid {
width: 400px;
margin: auto;
z-index: 0;
position: relative; /* relative on "pyramid" and not "zone" */
}
/* build the triangle as pseudo element fo "zone" */
.zone:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(248, 153, 46);
/* the pyramid shape */
clip-path: polygon(50% 0, 100% 100%, 0 100%);
transition: 0.5s;
}
.zone {
padding: 20px 0;
text-align: center;
cursor: pointer;
color: black;
clip-path: inset(0); /* clip the triangle to only the shape of each "zone"*/
}
/* using an extra div to correctly place the tooltip*/
.zone > div {
display:inline-block;
position:relative;
}
/* update color on hover */
.zone:hover {
color: white;
}
.zone:hover:before {
background: rgba(118, 113, 113);
}
/**/
.zone .arrowtext {
position: absolute;
visibility: hidden;
white-space:nowrap;
background-color: black;
color: #fff;
padding: 5px;
border-radius: 6px;
top: -5px;
left: 105%;
}
.zone:hover .arrowtext {
visibility: visible;
}
<div class="pyramid">
<div class="zone">
<div>0. zero<span class="arrowtext">Tooltip text</span></div>
</div>
<div class="zone">1. One</div>
<div class="zone">2. Two</div>
<div class="zone">3. Three</div>
<div class="zone">4. Four</div>
</div>