<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="pen">
<div class="container">
<div class="tooltip-container">
<div class="tooltip">
<ul class="sheet-1">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<ul class="sheet-2">
<li>Cancel</li>
</ul>
</div>
</div>
</div>
</div>
body {
--pink: #FF1C68;
--green: #14D790;
--blue: #198FE3;
--white: #fff;
background: var(--white);
font-family: 'Open Sans', sans-serif;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.pen {
flex: 1 1 100%;
}
.created-by {
flex: 0 0 50px;
background: #fff;
color: #222;
text-decoration: none;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
}
.logo {
margin-left: 10px;
}
.pen {
display: flex;
justify-content: center;
align-items: flex-start;
}
.container {
position: absolute;
button {
cursor: pointer;
padding: 20px 25px;
border: none;
font-size: 18px;
font-weight: bold;
color: white;
background: linear-gradient(#ED00BB, #A100F6);
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
}
$tooltipColor: #198FE3;
.tooltip-container {
position: absolute;
padding-top: 50px;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
&:after {
content: '';
display: block;
background: $tooltipColor;
width: 30px;
height: 30px;
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%) rotateZ(45deg);
}
}
.tooltip {
background: $tooltipColor;
position: relative;
}
ul {
margin: 0;
padding: 30px;
width: 200px;
}
.sheet-2 {
display: none;
}
$textColor: #fff;
li {
list-style: none;
color: $textColor;
cursor: pointer;
margin-bottom: 20px;
border-bottom: 2px solid $textColor;
padding-bottom: 10px;
opacity: 0;
&:last-child {
margin-bottom: 0;
}
}
View Compiled
const { spring, tween, easing } = popmotion;
const tooltip = document.querySelector('.tooltip');
const sheet1 = document.querySelector('.sheet-1');
const sheet2 = document.querySelector('.sheet-2');
const sheet1Items = Array.from(document.querySelectorAll('.sheet-1 li'));
const sheet2Items = Array.from(document.querySelectorAll('.sheet-2 li'));
const pages = [sheet1, sheet2];
let activeSheet = sheet1;
const tooltipProps = {
flip: {
transition: ({ from, to }) => tween({ from, to, ease: easing.backOut })
},
offLeft: { staggerChildren: 50 }
};
const offTransition = {
opacity: 0,
transition: ({ from, to }) => tween({ from, to, duration: 200 })
};
const itemProps = {
offLeft: { ...offTransition, x: -20 },
on: { x: 0, opacity: 1 },
offRight: { ...offTransition, x: 20 }
};
const tooltipPoser = pose(tooltip, tooltipProps);
sheet1Items.forEach(item => tooltipPoser.addChild(item, {
initialPose: 'on',
...itemProps
}));
const show = (sheet, items) => () => {
const currentSheetIndex = pages.indexOf(activeSheet);
const nextSheetIndex = pages.indexOf(sheet);
const isRight = currentSheetIndex - nextSheetIndex < 1;
tooltipPoser.set(isRight ? 'offLeft' : 'offRight')
.then(() => {
// Measure and cache the physical dimensions of the element
tooltipPoser.measure();
// Switch sheets in DOM
activeSheet.style.display = 'none';
sheet.style.display = 'block';
// Remove current items as children from tooltipPoser and add new ones
tooltipPoser.clearChildren();
items.forEach(item => tooltipPoser.addChild(item, {
initialPose: isRight ? 'offRight' : 'offLeft',
...itemProps
}));
activeSheet = sheet;
tooltipPoser.flip()
.then(() => tooltipPoser.set('on'));
});
};
sheet1.addEventListener('click', show(sheet2, sheet2Items));
sheet2.addEventListener('click', show(sheet1, sheet1Items));
View Compiled
This Pen doesn't use any external CSS resources.