Issue with div not resizing as content is added

HTML Code

<div class="container">
    <div class="tip_text">A</div>
    <div class="tip_content">text example</div>
</div>

<br /><br /><br />

<div class="container">
    <div class="tip_text">B</div>
    <div class="tip_content">text text text text text text text text</div>
</div>

CSS Code

.container{
    position: relative;
    float: left;
}

.tip_text{
    position: relative;
    float:left;
    width: 130px;
    height: 30px;
    margin: 0px;
    padding: 2px;
    text-align: left;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #acacac;
    cursor:help;
}


.tip_content{
    background: #333;
    color: #fff;
    padding: 10px 15px;
    z-index: 98;
    min-height: 15px;
    position:absolute;
    left: 100%;
    font-size: 12px;

}

The code snippet above presents a particular issue that needs resolution. The "tip_content" divs are not expanding when filled with a significant amount of text. Despite the default behavior of div elements to grow based on content, in this case, they do not. Any insights or solutions to this problem would be greatly appreciated.

Link to Example

csshtml

Answer №1

white-space: nowrap;

This solution appears to resolve the issue at hand. Below is the complete code for those interested in how the solution is implemented, utilizing CSS and CSS3 to generate tooltips.

HTML

<div class="container">
    <div class="tip_text">D</div>
    <div class="tip_content">test</div>
</div>

<br /><br /><br />

<div class="container">
    <div class="tip_text">D2</div>
    <div class="tip_content">test test test test test test test</div>
</div>
Possibly you will like reading about affordable options on web design.

CSS (full)

.container{
    position: relative;
    float: left;
}

.tip_text{
    position: relative;
    float:left;
    width: 130px;
    height: 30px;
    margin: 0px;
    padding: 2px;
    text-align: left;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #acacac;
    cursor:help;
}

.tip_text:hover + .tip_content{
    opacity: .9;
    visibility: visible;
    margin-left: 10px;
}

.tip_content:before{
    border: solid;
    border-color:  transparent #333;
    border-width: 6px 6px 6px 0;
    content: "";
    z-index: 99;
    position:absolute;
    left:-6px;
    top:12px;
}

.tip_content{
    background: #333;
    color: #fff;
    padding: 10px 15px;
    z-index: 98;
    min-height: 15px;
    float: left;
    left: 100%;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    
    -moz-box-shadow: 2px 2px 2px #666;
    -webkit-box-shadow: 2px 2px 2px #666;
    box-shadow: 2px 2px 2px #666;
  
    opacity: 0;
    margin-left: 20px;
    visibility: hidden;
  
    -webkit-transition-property:opacity, visibility, margin-left;
    -webkit-transition-duration:0.2s, 0.2s, 0.1s; 
    -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
  
    -moz-transition-property:opacity, visibility, margin-left;
    -moz-transition-duration:0.2s, 0.2s, 0.1s;  
    -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
  
    -o-transition-property:opacity, visibility, margin-left;
    -o-transition-duration:0.2s, 0.2s, 0.1s; 
    -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
  
    transition-property:opacity, visibility, margin-left;
    transition-duration:0.2s, 0.2s, 0.1s; 
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;

}

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

Create dynamic automatic titles in HTML with JavaScript

Below is the code snippet to add an image with a link to the home-page and an h1 with the document name (if there isn't one already). This HTML code includes a JavaScript file reference in the <head> section and uses a <h1> tag for the ti ...

javascripthtmldom

What is the best way to synchronize HTML5 audio playback on different browsers?

When working with audio files in different browsers like Chrome, Firefox, and Safari, I noticed that they seem to start at slightly different timestamps. This discrepancy becomes more pronounced as the audio progresses, with a gap of around 5 seconds after ...

javascripthtmlmp3html5-audio

Guide on how to retrieve additional data from the API by pressing the "Load More" button

Hello, I am working on a project where I aim to display user data from an API called https://reqres.in/api/users?page=(the page number can be 1,2 or more) and present it in an HTML table using JavaScript with promises. Currently, I have successfully popula ...

javascripthtmlrenderinges6-promise

On one webpage, IE 11 is correctly styling certain visited hyperlinks while failing to do so for others

Although I acknowledge that others have asked similar questions, none seem to address the exact issue I am facing, nor do they offer practical solutions or clear explanations. Issue I'm encountering a problem where some visited hyperlinks in IE 11 f ...

cssinternet-explorerhyperlinkcache-controlvisited

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom

I am unable to modify the suffix located beneath the price of the product

Although I am not well-versed in PHP, I managed to create a code to display parcel descriptions below the price of products. The issue I am facing is that my code is calculating too many decimal places and not displaying the default currency, which should ...

phphtmlwordpresswoocommerce

Top jquery CSS selector for locating a table's colspan in Internet Explorer

Does anyone know a more efficient way to find the colspan of table cells in IE, specifically when it's other than 1? The current selector I'm using feels clunky. Any suggestions on how to improve this? if (isIE) { selector = "> tbody > ...

jquerycss

converting the names of files in a specific directory to a JavaScript array

Currently working on a local HTML document and trying to navigate through a folder, gathering all the file names and storing them in a JavaScript array Let's say I have a folder named Videos with files like: - VideoA.mp4 - VideoB.mp4 How can I cre ...

javascripthtmlarraysfiledirectory

Is it possible to adjust the default zoom level of my website by utilizing HTML or CSS?

After creating my website with a 50% zoom setting, I've encountered an issue where it appears too zoomed in for users whose browser default is set at 100%. How can I fix this problem? I attempted to use *{zoom:50%} in CSS to set the default zoom leve ...

htmlcss

Tips for showcasing a search bar on Google search results

While browsing in Google, I came across websites that have a search bar displayed after their initial search result. This functionality allows users to easily search within the website as shown in the image below. I am intrigued and wondering how this can ...

html

What is the best way to add a textfield within an image?

Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com? I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield". ...

htmlcss

Incorporate new functions through the css class name "javafx"

On my dashboard, I have 10 labels that share the same CSS class for mouse over events. Now, I want to change the button style after it is pressed and remove the mouse over effect. How can I achieve this? ...

javacssjavafxfxmldashboard

What steps should I take to design a polished PDF document?

I have been tasked with automating the invoicing system at our company. Currently, all data is stored in a local MySQL database and someone manually updates an Excel spreadsheet, which is then merged into a MS Word template for generating invoices. The obj ...

htmlcssxmlpdfxsl-fo

Utilizing JQuery to ensure that rows have consistent height in two dynamically generated tables

To meet my specific requirements, I am tasked with creating two separate tables that will contain the same number of rows but different data. The first table will display Item Information, while the second table will provide consolidated information about ...

htmljquerycssdatatables

Font may seem more slender in Firefox and Safari compared to Chrome where the appearance is impeccable

I am currently working on achieving consistent font appearance across Mac Chrome, Safari, and Firefox (IE compatibility to be addressed later). My experiments have included: -webkit-font-smoothing: subpixel-antialiased; The font appears almost identica ...

htmlcssgoogle-font-api

Image fails to download on Safari and iPhones in PHP

Can anyone help me figure out why images are opening in a new window instead of downloading inside Chrome and Firefox on my iPhone? ...

phphtmlwordpress

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Unable to locate web element using Selenium in C#

Here is the HTML code I am currently using: <div class="modal-footer"> <button class="btn btn-primary" type="button" value="Show Alert" ng-click="questions.getIrMessage()" data-dismiss="modal">Confirm</button> <button class ...

javascriptc#htmlselenium

Perform the action when the button is clicked

I'm struggling with finding a solution to this problem. I have an input field and a submit button. My goal is to update the value of a variable to match the value in the input field when the submit button is clicked. Additionally, I need to execute a ...

jqueryhtmljson

The functionality of Flatbutton(Input handler) appears to be malfunctioning

I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...

javascripthtmlreactjsmaterial-designmaterial-ui