Как я могу получить половину значения максимальной ширины содержимого?

Я показываю всплывающую подсказку и хочу, чтобы она располагалась по центру родительского элемента, независимо от ее длины.

Я думал, что, возможно, я мог бы использовать calc() с max-content, но, видимо, это не так.

*[tooltip] {
    position: relative;
    &:hover {
        &:after {
            content: attr(tooltip);
            display: block;
            position: absolute;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            position: absolute;
            top: 50px;
            left: 0px;
            width: max-content;
            font-weight:bold;
            font-size:0.9em;
            text-align:center;
            margin-left: calc(max-content / 2);
        }
    }
}

Я всегда могу использовать 100% в качестве ширины, но тогда это всегда будет ширина родительского элемента, и иногда это слишком мало, а иногда слишком много; поэтому я использую max-content.

<div tooltip = "Hello World">Hover me.</div>

Как я могу решить эту дилемму без использования JS?

Обновлено:

Вот изображение того, как это должно выглядеть.

Независимо от того, сколько текста во всплывающей подсказке, он всегда должен располагаться по центру. Если я использую подход 100% ширины, он останется посередине, но всегда будет иметь одинаковую ширину, в результате чего слова будут разбиты на новые строки.

При использовании max-content ширина всегда отличается от других всплывающих подсказок, поэтому мне становится трудно центрировать ее.