<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="size">
Size: <span class="value">20px</span>
</label>
<input type="range" id="size" min="5" max="30" value="20">
</div>
<div class="property">
<label for="top">
Top: <span class="value">75%</span>
</label>
<input type="range" id="top" min="0" max="100" value="75">
</div>
<div class="property">
<label for="left">
Left: <span class="value">50%</span>
</label>
<input type="range" id="left" min="0" max="100" value="50">
</div>
</form>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
--triangle-size: 20px;
--triangle-top: 75%;
--triangle-left: 50%;
--accent-color: #ed2453;
--dark-accent-color: #c1121f;
--solid-color: #020e13;
}
.tooltip {
position: relative;
&::before {
content: "";
position: absolute;
top: var(--triangle-top);
left: var(--triangle-left);
z-index: -1;
display: block;
height: var(--triangle-size);
width: var(--triangle-size);
transform: rotate(45deg) translateY(25%) translateX(-50%);
background-color: var(--accent-color);
border: 3px solid var(--dark-accent-color);
}
}
/* Aesthetic Styles */
*,
*:before,
*:after {
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");
// Size Slider
const sizeInput = document.querySelector("#size");
const sizeLabelValue = document.querySelector("label[for='size'] .value");
sizeInput.addEventListener("input", (event) => {
const value = `${event.target.value}px`;
sizeLabelValue.innerHTML = value;
tooltip.style.setProperty("--triangle-size", 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 sizeDefault = "20px";
const topDefault = "75%";
const leftDefault = "50%";
resetButton.addEventListener("click", (event) => {
sizeLabelValue.innerHTML = sizeDefault;
tooltip.style.setProperty("--triangle-size", sizeDefault);
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.