default tooltip shows at the bottom of content with custom html

[handhikadj]

looking at the image, the default tooltip appears at the bottom and it's ugly. how do I get rid of the default tooltip and leave the custom content behind?

https://codesandbox.io/s/stoic-rubin-qgki5

<div id="this-is-error" class="this-is-error" style="display: none;">
      <div class="row">
        <p style="color: red; font-weight: bold; font-size: 15px;">
          Server error. Unsaved
        </p>
      </div>

      <div class="row mt-5">
        <p id="p-text">This is not showing</p> // this doesn't appear on the tooltip. dunno why
      </div>
    </div>

    <button id="appear-tooltip" type="button" class="btn btn-primary">
      Primary
    </button>

const template = document.getElementById("this-is-error");
      template.style.display = "block";

      tippy("#appear-tooltip", {
        content: template,
        delay: 1000,
        placement: "bottom-end",
        allowHTML: true
      });

[atomiks]

You should style .tippy-box instead of an inner content element. Check the themes docs. Or you can not import the CSS, and style everything from scratch.