tooltip - 如何根据消息长度调整工具提示气泡大小？

Question

我正在尝试创建一个工具提示，我似乎遇到的唯一问题是工具提示气泡的大小。气泡大小在其父容器内，但我希望气泡以 21.875em 的最大宽度展开。

如果我取消 .c-tooltip 的相对定位，气泡将是正确的宽度，但位置不在工具提示触发器（文本）下

这是我当前的工具提示结构

<span class="c-tooltip" aria-describedby="test1">Default Tooltip
    <div class="c-tooltip__message" id="test1">
        <p>Hello I am a tooltip This is a . aw fldsjfsia sa cjkdsal cls cj;a cs alc alk la dcs</p>
    </div>
</span>

https://codepen.io/jack1020/pen/NWdLJJB

标签： tooltip