<main class="result top">
  <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">15px</span>
    </label>
    <input type="range" id="size" min="5" max="30" value="15">
  </div>

  <div class="position top">
    <button class="top" type="button">Top</button>
    <button class="right" type="button">Right</button>
    <button class="bottom" type="button">Bottom</button>
    <button class="left" type="button">Left</button>
  </div>
</form>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --triangle-size: 15px;

  --accent-color: #ed2453;
  --solid-color: #020e13;
  --dark-accent-color: #c1121f;
}

.tooltip {
  anchor-name: --tooltip;

  padding: 10px 15px;
  width: fit-content;

  font-weight: 800;
  color: #fff;
  background-color: var(--accent-color);

  &::before {
    content: "";

    position: absolute;
    position-anchor: --tooltip;

    z-index: -1;

    display: block;
    height: var(--triangle-size);
    width: var(--triangle-size);

    transform: rotate(45deg);

    background-color: var(--accent-color);
    border: 3px solid var(--dark-accent-color);
  }
}

.top .tooltip::before {
  top: calc(anchor(bottom) - var(--triangle-size) / 2);
  left: calc(anchor(center) - var(--triangle-size) / 2);
}

.right .tooltip::before {
  top: calc(anchor(center) - var(--triangle-size) / 2);
  right: calc(anchor(left) - var(--triangle-size) / 2);
}

.bottom .tooltip::before {
  bottom: calc(anchor(top) - var(--triangle-size) / 2);
  left: calc(anchor(center) - var(--triangle-size) / 2);
}

.left .tooltip::before {
  top: calc(anchor(center) - var(--triangle-size) / 2);
  left: calc(anchor(right) - var(--triangle-size) / 2);
}

/* 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;
}

.top .noted {
  flex-flow: column;
}

.right .noted {
  flex-flow: row-reverse;
}

.bottom .noted {
  flex-flow: column-reverse;
}

.left .noted {
  flex-flow: row;
}

.noted {
  display: flex;
  place-items: center;
  gap: 20px;

  padding: 40px 60px;
  border: 2px solid var(--solid-color);

  text-align: center;
}

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

.position {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

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

.top .top,
.right .right,
.bottom .bottom,
.left .left {
  color: #fff;
  background-color: var(--accent-color);
}

const tooltip = document.querySelector(".tooltip");
const result = document.querySelector(".result");

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

// Position Controls

const positionContainer = document.querySelector(".position");
const positionButtons = document.querySelectorAll(".position button");

const changePosition = (position) => {
  const currentPosition = result.classList[1];

  positionContainer.classList.remove(currentPosition);
  positionContainer.classList.add(position);

  result.classList.remove(currentPosition);
  result.classList.add(position);
};

positionButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    changePosition(event.target.classList[0]);
  });
});

// Reset

const resetButton = document.querySelector(".reset");
const sizeDefault = "15px";
const positionDefault = "top";

resetButton.addEventListener("click", (event) => {
  sizeLabelValue.innerHTML = sizeDefault;
  tooltip.style.setProperty("--triangle-size", sizeDefault);

  changePosition(positionDefault);
});