Как изменить размер всплывающей подсказки в css

Question

Попытка настроить всплывающие подсказки, которые я создал. Мне бы хотелось, чтобы всплывающая подсказка появлялась прямо под парящим текстом, была бы отзывчивой и, что самое важное, чтобы текст был многострочным. Под этим я подразумеваю, когда я хочу, чтобы моя всплывающая подсказка вместо горизонтального распространения распространялась по вертикали.

Таким образом, корректируя ширину текста, чем длиннее текст, тем длиннее вертикальный размер контейнера, чем горизонтальный текст.

Это то, что я пробовал до сих пор:

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    color: black;
}

.tooltip:hover {
    text-decoration: none;
}

[data-title]::after {
    content: attr(data-title);
    background: rgba(0, 0, 0, 0.2);
    color: #111;
    -website-transform: translateY(50%) translateX(-55%);
    transform: translateY(50%) translateX(-55%);
    word-wrap: break-word;
    height: 350px;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -2.6em;
    left: 0%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 20;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}

<p>Words words <a class="tooltip" data-title="Title text.">link text</a> words.
    More words <a class="tooltip" data-title="More link text.">more link text</a>.</p>

Answer 1

Вы можете попробовать это-

[data-title]:after {
    content: attr(data-title);
    background: rgba(0,0,0,.9);
    color: #fff;
    word-wrap: break-word;
    height: auto;
    width: 100px;
    position: absolute;
    padding: 1px 5px 2px 5px;
    top: 18px;
    left: 0;
    word-break: break-all;
    box-shadow: 1px 1px 3px #222222;
    opacity: 20;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}

.tooltip {
    color: blue;
    position: relative;
    cursor: pointer;
}

[data-title]:hover::after{
    visibility: visible;
}

We would start off by collecting our data. The collection method will vary depending on what sources we are using. After this process we would then proceed to <a class="tooltip" data-title="The train_test_split function in sklearn splits the dataset into training and test data randomly. You can manually set the test_size option to define the proportion of the dataset to be included in both the test and training splits, by default this value is 0.25 meaning the training set will contain 75% of the data while the test set contains 25% of the data.">split the data</a> into two sets; training and test data. We use the training data to train our model and the test data to <a class="tooltip" data-title="We split the data into training and test data because we want our model to generalize to data it has not been exposed to">test its performance</a>.

Примечание: Для лучшей производительности вы должны использовать javascript для размещения всплывающей подсказки, Автоматическая настройка размещения и c.