<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);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.