<main class="result">
<p class="noted">
<span class="tooltip">I am a tooltip</span>
<span class="text">I am some bit of text </span>
</p>
</main>
<!-- -->
<form class="controls">
<button type="reset" class="reset">Reset</button>
<div class="property">
<label for="base">
Base: <span class="value">20px</span>
</label>
<input type="range" id="base" min="5" max="50" value="20">
</div>
<div class="property">
<label for="height">
Height: <span class="value">15px</span>
</label>
<input type="range" id="height" min="5" max="50" value="15">
</div>
<div class="property">
<label for="top">
Top: <span class="value">100%</span>
</label>
<input type="range" id="top" min="-100" max="100" value="100">
</div>
<div class="property">
<label for="left">
Left: <span class="value">100%</span>
</label>
<input type="range" id="left" min="0" max="100" value="100">
</div>
</form>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
--triangle-base: 20px;
--triangle-height: 15px;
--triangle-top: 100%;
--triangle-left: 100%;
--accent-color: #ed2453;
--solid-color: #020e13;
}
.tooltip {
position: relative;
&::before {
content: "";
position: absolute;
top: var(--triangle-top);
left: var(--triangle-left);
z-index: -1;
width: var(--triangle-base);
height: var(--triangle-height);
background-color: var(--accent-color);
clip-path: polygon(
max(50% - var(--triangle-left), 0%) 0,
min(150% - var(--triangle-left), 100%) 0%,
50% 100%
);
transform: translate(-50%);
}
}
/* Aesthetic Styles */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-family: "Montserrat", sans-serif;
}
body {
display: flex;
flex-flow: row-reverse;
justify-content: space-between;
gap: 40px;
padding: 20px;
height: 100vh;
@media (width < 700px) {
flex-flow: column;
}
}
.result {
flex: 2;
display: grid;
place-items: center;
}
.noted {
display: flex;
flex-flow: column;
place-items: center;
gap: 20px;
padding: 40px 60px;
border: 2px solid var(--solid-color);
text-align: center;
}
.tooltip {
padding: 10px 15px;
width: fit-content;
font-weight: 800;
color: #fff;
background-color: var(--accent-color);
}
.text {
border: 2px solid var(--solid-color);
padding: 10px 15px;
font-weight: 800;
color: var(--solid-color);
}
.controls {
flex: 1;
display: flex;
flex-flow: column;
gap: 10px;
}
.property {
display: flex;
flex-flow: column;
gap: 10px;
label {
display: flex;
justify-content: space-between;
gap: 10px;
width: max-content;
}
input {
width: min(300px, 100%);
accent-color: var(--accent-color);
}
}
button {
all: unset;
padding: 10px 15px;
border: 2px solid var(--accent-color);
width: fit-content;
font-weight: 800;
color: #ed2453;
cursor: pointer;
transition: background-color 200ms ease-out;
&:is(:hover, :active) {
background-color: var(--accent-color);
color: #fff;
}
&:active {
transform: scale(102%);
}
}
const tooltip = document.querySelector(".tooltip");
// Base Slider
const baseInput = document.querySelector("#base");
const baseLabelValue = document.querySelector("label[for='base'] .value");
baseInput.addEventListener("input", (event) => {
const value = `${event.target.value}px`;
baseLabelValue.innerHTML = value;
tooltip.style.setProperty("--triangle-base", value);
});
// Height Slider
const heightInput = document.querySelector("#height");
const heightLabelValue = document.querySelector("label[for='height'] .value");
heightInput.addEventListener("input", (event) => {
const value = `${event.target.value}px`;
heightLabelValue.innerHTML = value;
tooltip.style.setProperty("--triangle-height", value);
});
// Top Slider
const topInput = document.querySelector("#top");
const topLabelValue = document.querySelector("label[for='top'] .value");
topInput.addEventListener("input", (event) => {
const value = `${event.target.value}%`;
topLabelValue.innerHTML = value;
tooltip.style.setProperty("--triangle-top", value);
});
// Left Slider
const leftInput = document.querySelector("#left");
const leftLabelValue = document.querySelector("label[for='left'] .value");
leftInput.addEventListener("input", (event) => {
const value = `${event.target.value}%`;
leftLabelValue.innerHTML = value;
tooltip.style.setProperty("--triangle-left", value);
});
// Reset
const resetButton = document.querySelector(".reset");
const baseDefault = "20px";
const heightDefault = "15px";
const topDefault = "100%";
const leftDefault = "100%";
resetButton.addEventListener("click", (event) => {
baseLabelValue.innerHTML = baseDefault;
tooltip.style.setProperty("--triangle-base", baseDefault);
heightLabelValue.innerHTML = heightDefault;
tooltip.style.setProperty("--triangle-height", heightDefault);
topLabelValue.innerHTML = topDefault;
tooltip.style.setProperty("--triangle-top", topDefault);
leftLabelValue.innerHTML = leftDefault;
tooltip.style.setProperty("--triangle-left", leftDefault);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.