Only CSS creates tooltips within text seamlessly without any line breaks

I have been exploring ways to incorporate multiple tooltips into text on my website. After experimenting with both span and div tags, I was able to create a tooltip using CSS only. However, I am facing challenges with positioning the tooltiptext correctly. Currently, it appears below and to the left of the hoverable word instead of directly above it as intended. Here is the snippet of my code:

.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}

.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
}

.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}
<p>Lorem ipsum dolor sit amet, 
    <span class="tooltip">  consectetuer<span class="tooltiptext"> Some Text</span></span> 
adipiscing elit. Aenean commodo ligula eget dolor.</p>

Does anyone have suggestions for resolving this issue?

htmlcss

Answer №1

It seems you were looking for a solution like this.

p {
  padding:10px;
}

.tooltip {
position: relative;
display: inline;
text-decoration: underline dotted black;
}

.tooltip:hover .tooltiptext {
display: block;
position: absolute;
z-index: 3;
padding: 0.3vw;
left:50%;
top:-19px;
transform:translateX(-50%);
width:100%;
text-align:center;
}

.tooltiptext {
display: none;
color: white;
background-color: black;
border-radius: 0.3vw;
}
<p>Lorem ipsum dolor sit amet, 
    <span class="tooltip">  consectetuer<span class="tooltiptext"> Some Text</span></span> 
adipiscing elit. Aenean commodo ligula eget dolor.</p>

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

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because ...

cssangulartheming

Increase or decrease the quantity of items by cloning with Jquery and dynamically changing the ID

Currently, I am working on a jQuery clone project where I need to dynamically add and delete rows. Despite searching extensively on Stack Overflow and Google, I only have a basic understanding of how jQuery clone works. Any suggestions would be greatly ap ...

javascriptjqueryhtmlcss

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap, or flex without altering the or ...

htmlcsstwitter-bootstrap-3flexboxgrid

Transforming "datetime-local" into java.sql.Timestamp

I am working on a JSP page that has a form containing an input field with type "datetime-local". The data from this form is then passed to a servlet using the following code: String resetTimeString = request.getParameter(RequestParameterName.RESET_TIME); ...

javahtmltimestamp

The CSS hamburger menu halves in size when being closed

I have successfully created a CSS/JS hamburger menu with a transforming icon upon clicking. However, I encountered a bug where, upon clicking the 'close' button on the hamburger, the navigation menu cuts behind the header, resulting in a messy ap ...

javascriptcss

Commence the 10-second Redirect Timer

I implemented a page that automatically redirects the user after 10 seconds using the following code snippet. <META HTTP-EQUIV="refresh" CONTENT="10;URL=login.php"> Now, I have this PHP code that I want to display dynamically counting down from 10 ...

phphtmlhttp-redirect

Is there a way to stop users from altering form values on a webpage by using the "inspect" tool in their browser?

Currently, I am developing an application using node.js and handlebars as the view engine. One issue I am facing is that when a form is submitted, it inserts data into the database. The problem arises because the form passes values that are hidden from the ...

javascripthtmlnode.js

The mixin 'media-breakpoint-only' is not defined

Recently, I decided to delve into coding with Bootstrap4 and Sass. I made sure all the necessary configurations were in place for my environment/project setup: including ruby 2.3.1p112 (2016-04-26 revision 54768) [i386-mingw32] and a list of installe ...

rubytwitter-bootstrapcsscompass-sassbootstrap-4

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

`vertical navigation on the left side with expanding submenus`

Trying to create a navigation system on the left side of the page with submenus appearing on the right without impacting the main content. If anyone has any code snippets or resources that can help achieve this, I would really appreciate it. The objectiv ...

htmljquerycss

Enhancing jQuery functionality: Ensuring newly added elements are aware of existing functions

I need assistance with my HTML table. Each row (tr) contains a value, for example 200$, and a delete button. How can I ensure that each new row added automatically knows the recent functions without having to call them every time? $(function () { $(&ap ...

javascripthtmljqueryfunctioncall

Unable to Publish HTML File

I am stumped as to why this particular file is not getting posted. Despite my thorough search for solutions, I have yet to pinpoint the issue. All the necessary ini file variables seem to be in order and I have verified the correct form type. Additionally, ...

jqueryhtmltwitter-bootstrap-3

Utilize HTML code within a .php file without it being parsed

When I include HTML code in my PHP file, the HTML code doesn't get interpreted and just appears as text in the browser. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> ...

phphtml

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

Discover the following input

Can someone assist me? I am looking for a way to automatically move the cursor to the next input field after filling out the first one. Here is the code snippet I have been working with: jQuery: $('input').keyup(function(){ if($(this).val().m ...

jqueryhtmlhtml-lists

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

javascripthtmlcssslideshowweb-maker

The hovering over a table data element results in a superior transformation

I recently created a table with an interesting structure where the first <tr> contains two <td> elements (the first one having a rowspan), while the second <tr> only has one <td>. My goal is to have hovering over the <td> in t ...

csshover

Learn the process of transferring data-target IDs to another JSP using Bootstrap

Currently, I am encountering an issue where I am trying to use bootstrap to display a dialog box by clicking on a button. The dialog box is created in HTML (.jsp) and the submit button is in another .jsp file. However, when I click on the button, instead o ...

htmlajaxtwitter-bootstrapjsptwitter-bootstrap-3

Creating dynamic pages using user input in Node and Express

Currently, I am facing a challenge in rendering text using node/express. Within my project setup, there is an HTML file containing a form. The file named search.ejs looks like this: $(document).ready(function(){ var userInput; $("#submit-button-i ...

javascripthtmlnode.jsexpress

Error: Trying to access the parent node of an undefined property

After incorporating this script into my webpage for the newsletter sign-up process, I aimed to reveal customized content post user subscription. <script> function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode ...

javascripthtml