如何解决React工具提示显示在元素旁边

好的，在我使用的其他按钮和元素中，它都能正常工作。但对于固定位置的旁白部分，工具提示显示在底部。下一个工具提示，如github的例子，甚至显示在更远的地方。

我认为这与css中的位置有关，但我想不出来。有谁遇到过同样的问题并能提供帮助？

css

    aside {
  background-color: #16123f;
  position: fixed;
  top: 40%;
  padding: 10px 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  filter: drop-shadow(0px 3px 6px #00000045);
    }

反应组件的代码

 <aside>
  <ul className="social">
    <li>
      <a data-tip data-for="ePost" href="mailto:stig.ark@gmail.com">
        <FontAwesomeIcon icon={faAt} className="fa-solid fa-at fa-lg" />
      </a>
      <ReactTooltip
        backgroundColor="#ed0b70"
        textColor="black"
        id="ePost"
        place="top"
        effect="solid"
      >
        Send meg en epost!
      </ReactTooltip>
    </li>
    <li>

[这是外观，我希望它就在旁边。