Tips for resizing a tooltip using CSS

I am currently working on customizing tooltips and would like them to display right below the hover text in a responsive manner, with the ability to have multiline text. Instead of spreading horizontally, I want the tooltip to expand vertically based on the length of the content.

My goal is to adjust the width of the text so that the container's vertical size increases as the text gets longer rather than flowing horizontally.

Here is what I have attempted so 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>
javascripthtmlcss

Answer №1

Check out this code snippet to create tooltips:

[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;
}
To use this code effectively, make sure to understand how to manipulate tooltip placement using JavaScript for better performance. This will allow for automatic adjustment of the tooltip based on the position of the element triggering it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform the styles from a React component into Cascading Style Sheets

I have been tasked with transitioning all the styles from the JavaScript file to the CSS file while ensuring the design remains intact. I am facing an issue where using the CSS styles breaks the search field design. The original design can be seen here: S ...

javascriptcssreactjs

Having trouble with Gulp hanging on the task named 'some_task_name' when using gulp.parallel or gulp.series?

Out of the blue, my gulp configuration suddenly stopped working. It gets stuck on 'Starting...' when I use tasks with gulp.parallel or gulp.series. Just yesterday, the same config was running smoothly. Why did this sudden change occur? Here is a ...

javascriptnode.jsnpmgulpgulp-watch

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Check out my jsFiddle code below: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363882,131.044922), map: map, title:"Hello World!", icon: CanvasCrear("hola", 15) ...

javascriptcsshtmlgoogle-mapscanvas

I am looking to execute a MySQL query using a value entered into a text box

$query="SELECT * FROM table1 where name='Vidya'"; My text field is ready to capture input. <input type='hidden' value='<?php echo $query;?>' id='getsearchquery' name='getsearchquery'> When I ...

phpjqueryhtmlajax

Using Selenium Webdrivers to Browse Pages with Minimal Resource Loading

I'm attempting to restrict Javascript from altering the source code of the site while testing with Selenium. Disabling Javascript completely in the Webdriver is not an option as I require it for testing purposes. Below is my approach for the Firefox W ...

javajavascriptseleniumselenium-webdriverwebdriver

Error: AJAX response shows as NaN, indicating that the requested resource was not found

Attempting to create a search engine using AJAX. When typing in the search box, nothing happens. After inspecting the element and opening the console, an error message is displayed: script.js:19 GET http://localhost/var/www/html/pendaftaran-siswa/NaN 404 ( ...

javascriptajax

Iterate over asynchronous calls

I am currently working with a code snippet that loops through an Object: for(var x in block){ sendTextMessage(block[x].text, sender, function(callback){ //increment for? }) } During each iteration, I need to make a request (send a Faceboo ...

javascriptnode.jsloopsexpress

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

htmlcssfirefoxrounded-corners

What is the process for retrieving matched information from a drop-down menu in HTML?

Is there a way to retrieve data from angularjs like this: This is the list of data I need to access: $scope.orderStatus = [ { os: 'Open', value: 1 }, { os: 'Completed', value: 2 }, { os:'Cancelled',value: 3 }, ...

javascripthtmlangularjsnode.js

Ways to verify if an array contains two identical object values?

I am in search of a way to determine whether my array contains duplicate object values or not. Let's say I have the following array of objects: const array = [ { id: "id1", quantity: 3, variation: "red", ...

javascript

Disabling a button until a selection is made in a combobox using Angular

I am currently working on a template that includes a combobox, a button, and a table. What I am trying to achieve is to make the buttons unclickable unless a value is selected from the combobox. After selecting a value, the button will call a service metho ...

htmlangular

Issues with iFrame Alignment

I recently created a digital catalog using FlipHTML5 and realized it needed to be more mobile-friendly. To address this issue, I included the following CSS: .size { width: 85vw; height: 75vh; Although this adjustment made the catalog display correctly on ...

htmlcssiframe

How do I directly display a variable in index.html using node.js?

Is there a way to retrieve user inputs from the index.html file, process them in Node.js, and then display the result back on the index.html page instead of redirecting to a new page? Form Handling with Express var express = require('express'); ...

javascripthtmlnode.jsexpress

The point in the vector data is incorrectly positioned on the map in OpenLayers

I am looking to display a world map using the default OpenLayers WMS, along with a single point on it that will have interactive events like onhover. Below is my code snippet: var options = { projection: ...

javascriptvectoropenlayerspoint

Unable to Locate Gulp Packages

Whenever I try to run the command gulp in my terminal, my gulp modules are not being found. Surprisingly, all other commands like node -v, gulp -v, and npm -v are working perfectly fine with the latest versions installed. I have tried running these command ...

javascriptnode.js

The regular expression for email validation does not accurately verify the portion following the period

I'm currently working on validating email addresses in my HTML page using an Angular directive. From my perspective, a valid email address looks like this: [email protected] The regular expression I've been using allows for email addresse ...

javascriptregexangularjs

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

csstwitter-bootstrap-3

Working with attributes in AngularJS directives

Building an overlay (or modal window) in AngularJS has been on my mind, and I've made some progress with the html/css layout. Here's a sneak peek at what it looks like: <section class="calendar"> <a open-overlay="overlay-new-calenda ...

javascriptangularjs

What is the best way to fetch all Firebase database IDs using Angular?

Is there a way to fetch all data from Firebase database along with their respective IDs? Currently, I have two functions - getAll() and get(input) that retrieve specific products based on the given ID. However, my current implementation only returns obje ...

htmlcssangulartypescript

How can I resolve the issue of the mouse x/y glitch while drawing on an HTML canvas using JavaScript/jQuery?

I've been searching all over for a solution to this issue, but I just can't seem to find out what's causing the problem... This is my first attempt at working on something like this in my spare time. I hope to apply what I learn to create a ...

javascriptjqueryhtmlcanvasdraw