<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<div class="field">This <a data-tooltip="Edit this text.">tooltip</a> uses a different approach.</div>

<hr>

<h2>Tooltip HTML</h2>
<div>&lt;a data-tooltip=&quot;<span id="output"></span>&quot;&gt;&lt;/a&gt;</div>
body {
  font-family: Roboto;
  text-align: center;
  --tippy-bg: #262A33;
  --font-color: white;
}

.field {
  margin-top: 1em;
}

[data-tooltip] {
  border-bottom: 1px dotted dodgerblue;
  cursor: pointer;
}

/* Custom Tippy theme */
.tippy-box[data-theme~=input] textarea {
  max-width: 300px;
  margin: 0;
  background: var(--tippy-bg);
  color: white;
  outline: none;
}
.tippy-box[data-theme~=input] {
  background-color: var(--tippy-bg);
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3);
  padding: 0;
  border-radius: 5px;
  font-size: 16px;
  color: var(--font-color);
}
.tippy-arrow {
  color: var(--tippy-bg);
}
var tip = document.querySelector("a")
var input = document.createElement("textarea")
input.value = tip.dataset.tooltip
document.getElementById("output").innerHTML = tip.dataset.tooltip

input.addEventListener("input", function()  {
  tip.dataset.tooltip = this.value
  document.getElementById("output").innerHTML = this.value
 })

tippy(tip, {
  content: input,
  placement: "top",
  allowHTML: true,
  theme: "input",
  interactive: true,
  trigger: "mouseenter click",
  animation: "scale-extreme",
  appendTo: document.body,
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.