<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">30px</span>
    </label>
    <input type="range" id="base" min="5" max="100" value="30">
  </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="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-base: 30px;
  --triangle-height: 15px;
  --triangle-left: 50%;

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

.tooltip {
  border-image: fill 0 // var(--triangle-height) conic-gradient(var(--accent-color) 0 0);
    clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    min(var(--triangle-left) + var(--triangle-base) / 2, 100%) 100%,
    var(--triangle-left) calc(100% + var(--triangle-height)),
    max(var(--triangle-left) - var(--triangle-base) / 2, 0px) 100%
  );
}

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

// 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 = "30px";
const heightDefault = "15px";
const leftDefault = "50%";

resetButton.addEventListener("click", (event) => {
  baseLabelValue.innerHTML = baseDefault;
  tooltip.style.setProperty("--triangle-base", baseDefault);

  heightLabelValue.innerHTML = heightDefault;
  tooltip.style.setProperty("--triangle-height", heightDefault);

  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.