How to resize tooltip in css

Question

Trying to customize tooltips I created. I would like the tooltip to appear right below the hover text, to be responsive and most importantly to make the text multiline. By this I mean when I want my tooltip to instead of spreading horizontally to spread vertically.

So adjusting the width of the text, the longer the text the longer the vertical size of the container as opposed to the text flowing horizontally.

This is what I have tried thus far:

 .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

You can try this-

 [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>.

Note: For the better performance you have to use javascript for tooltip placement, Auto placement adjustment etc.