Styling tooltips using only css - Dealing with overflow issues

What is the best way to effectively showcase these tooltips? When using overflow visible, the issue is resolved, but it causes other elements to spill out of the div. How can this be addressed? HTML:

<div id="test">
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
</div>

CSS:

#test{
width: 80px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
margin-top: 150px;
overflow: auto;
}
.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}

http://jsfiddle.net/6JeRU/1

Answer №1

Is it necessary to specify a height for the #test container div? When removed and replaced with overflow:visible, it functions perfectly:

http://jsfiddle.net/shaunp/6JeRU/4/

#test{
    width: 80px;
    /* no height */
    border: 1px solid black;
    margin: 0 auto;
    margin-top: 150px;
    overflow: visible;
}

Answer №2

Are you familiar with the latest clear fix solution?

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

Discover the steps to incorporate a glowing effect into your custom progress bar using JavaFX

After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar. To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a tim ...

Flex items in the center are getting truncated when viewed on a smaller screen size

I have a group of divs in my list, here's an example: .container { display: flex; flex-direction: row; justify-content: center; } When the container is larger than the viewport upon resizing, the first/second items get clipped off. I would like ...

R: Extracting data from web pages: The content appears to be formatted in XML but is not recognized as such; employing HTML

Working on scraping data from multiple years which are represented by different webpages. I have successfully extracted the 2019 data as expected, but encountering an error while attempting to preprocess the 2016 data in a similar manner. url19 <- &apos ...

Steps for performing a 'back' action within a div element using jQuery

Within my HTML, I have a div element containing a link. When the user clicks this link, I use AJAX to load new content into the div area. This new content includes a 'back' link that, when clicked, should revert back to the previous content. Cur ...

What is the best method for sending PHP data to an HTML file?

Once the user logs in, I aim to direct them to a separate HTML page (a landing page) that greets them with "welcome, (user)." I initially attempted to utilize cookies for this functionality but realized it isn't feasible. How can I achieve this? Here ...

Is there a way to include an optional backslash in URLs using the .htaccess file without leading browsers to believe I am navigating to a subfolder?

As I update my php pages with the .htaccess file, I am facing an issue where the pages do not load properly when an optional backslash ("/") is included in the URLs. One possible solution is to use absolute URLs instead of relative ones so that CSS and J ...

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Whenever the image is clicked, I want to display a hidden div with effects like automatically scrolling down to the bottom This is what my code looks like: $(document).ready(function() { $('#test').click(function() { $(&apos ...

struggling to insert submit button within input field in bootstrap 4.3.1

Currently, I am working with Bootstrap 4.3.1 and I have been attempting to place a submit button inside an input field. I have tried various methods from StackOverflow but haven't found a solution yet. Since my input has the class rounded-pill, it is ...

Adjusting icons based on the length of the text

When I have a title text and an icon, I want to align the icon to the left if the title fits on a single line. However, if the title spans multiple lines, then I need to align the icon to the top. I recently discovered a solution that involves using Javas ...

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

Creating an Angular 7 Template using HTML CSS and Javascript

I recently acquired a template that comes with HTML, CSS, and Javascript files for a static webpage. My goal is to integrate these existing files into my Angular project so I can link it with a Nodejs application to create a full-stack webpage with backend ...

What is the best way to display the most recent data from a sqlite database and incorporate animations for a more engaging

Hi there! I'm looking to retrieve data from an SQLite database and display only the latest entry. Additionally, I'd like to create an animation where scrolling reveals one entry at a time. I would greatly appreciate any assistance with this. Pl ...

Using jQuery to eliminate the 'disabled' attribute from CSS

After using the .val() method to enter data into a text box, I noticed that when trying to click "add", the button appears disabled. <input class="btn-primary action-submit" type="submit" value="Add" disabled=""> If I manually type in text, the dis ...

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

const html = document.querySelector('html') const body = document.querySelector('body') body.onclick = () => { console.log('body clicked') } html.onclick = () => { console.log('html clicked') } document. ...

Exploring the process of updating the background color of a specific component in Angular

I'm currently working on a website that will feature alternating colors of white and black. However, I am facing an issue where I can only apply background color changes globally in the CSS file. Does anyone know how to address this problem? ...

Reveal and conceal using CSS animations

I am working on adding animation effects to show and hide HTML elements triggered by a button click. The button toggles a "hide" class to display or hide the element. Check out my code snippet: const toggleButton = document.querySelector('button ...

The Android smartphone is experiencing issues with the responsive design not aligning properly on the

I'm encountering difficulties with creating a Viewport that functions properly on an android smartphone. My website is fully responsive, scaling down to 480 pixels wide. At this point, a min-width of 480px is set on the body tag. Initially, my viewp ...

IE 9 isn't displaying the Dropdown CSS Navigation

Welcome to my test page. Click here to view the test page. I recently found out that this page is not displaying correctly on Internet Explorer 9. Since I don't have IE 9, I'm using Net Renderer to preview my test page. Below you will find my ...

Creating a personalized design for MUI TextField spin button

Looking to customize the appearance of the up/down spin buttons in MUI TextField. https://i.sstatic.net/DcG66.png Desiring white arrows and a black surrounding area that's slightly larger, akin to this: https://i.sstatic.net/ZxMJw.png I'm aware ...