The min-height attribute of the tooltip functions, but the min-width attribute does

I found a helpful tooltip on this site:

I customized it to work with an input element:

<div class="tooltip">
     <input type="text" placeholder="Name" name="dp_name">
     <span>Full name asd as dasd as dasd</span>
</div>

Here is the CSS:

.tooltip {
    position: relative;
    display: inline;
}
.tooltip span {
    position: absolute;
    width: 120px;
    color: #FFFFFF;
    background: #327FBA;
    min-height: 32px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
    font-size: 12px;
}
.tooltip span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0; height: 0;
    border-right: 8px solid #327FBA;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.tooltip:hover span {
    visibility: visible;
    opacity: 0.9;
    left: 100%;
    top: 50%;
    margin-top: -16px;
    margin-left: 15px;
    z-index: 999;
}

The issue arises when the text exceeds the width of the tooltip, causing a line break and overflowing the background.

In my attempts to fix it by changing width: to min-width: in .tooltip span {}, or using width: auto, the tooltip either didn't expand correctly or became too narrow.

However, I did manage to contain the text vertically by replacing height with min-height.

Any suggestions on how I can restrict the text to a maximum width of 300px within the tooltip? (using max-width) It should then wrap onto a new line while maintaining vertical containment.

Thank you for your help!

http://jsfiddle.net/hrfz442d/

htmlcss

Answer №1

To ensure the tooltip has a maximum width, include the property max-width, but also make sure to add display:table

.tooltip span {
    position: absolute;
    color: #FFFFFF;
    background: #327FBA;
    min-height: 32px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
    font-size: 12px;
    display: table;
    max-width:150px;
    padding:0 .5em;
}

Check out the Jsfiddle Demo for reference

Answer №2

Simply insert this CSS snippet.

.tooltip span {
    position: absolute;
    width: 120px;
    color: #FFFFFF;
    background: #327FBA;
    min-height: 32px;
    line-height: 16px; /* adjust the line-height */
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
    font-size: 12px;
    word-break: break-word;
    display: table;
}

You can then modify the line-height as needed.

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

The styled-components in CSS are causing some issues with the color themes

Link to Image Showing the Issue. I have implemented themes and colors in my React application successfully, but I am encountering a peculiar problem with the labels. Whenever I switch the theme from green to blue and then back to green, focusing on the inp ...

cssreactjsformsinputstyled-components

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

Transferring the selected option from a drop-down menu to a PHP page using an HTML form

I'm currently working on developing an HTML form that will send the user's question and the selected topic to a PHP page. The topics are retrieved from a MySQL database using PHP. My goal is to submit the chosen topic value from a dropdown menu, ...

phphtmlmysqlforms

The appropriate use of spacing after text in the context of HTML and

Why is it that when I add padding or margin, no extra space is created after the text? Here is the output: I have tried adding padding and margin after the Stay Tuned text, but it seems to be not working. Any insights on what might be causing this issue? ...

javascripthtmlcssanimationcss-animations

Adding a Django URL to a personalized email design

Trying to send a Django email using a custom template for my website has been challenging. The Django URL link is not working properly within the template, even though it works fine without the template. The username variable seems to be functioning corre ...

htmldjangodjango-email

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

htmlcsscss-selectors

What is preventing my code from being recognized as a valid XML file?

Encountering an error indicating that this code snippet is not valid within an XSL file. This is the only feedback provided by the document system. While this code is a part of a larger document, I decided to isolate the issue to determine if it lies in ...

htmlxmltemplatesxslt

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

javascripthtmlcssaccordion

Tips for preserving user input from HTML into a text file and then reloading it back into the HTML document

I have recently created a character sheet for a game using HTML. The HTML file is mainly comprised of various input tags such as <input type="text">, <input type="number">, <input type="checkbox">, <input type="radio">, <select&g ...

javascripthtml

Adjust the font size and center alignment in the navigation bar using Bootstrap

I'm a beginner when it comes to using bootstrap and I'm having trouble adjusting the font size of my application's title. While I was able to change the color of the text, I can't seem to find where the font-size property is located for ...

htmlcsstwitter-bootstrap

The performance of the Ionic app is significantly hindered by lagging issues both on Google

After starting to work with the ionic framework, I noticed a significant change in performance when testing an android app on Chrome for the first time. It was fast and responsive until I added a button that led to a screen with navigation bars, side men ...

javascriptandroidcssangularjsionic-framework

Text in SVG file misaligned at the edge

After creating an SVG with a base64 background image and two text areas for top and bottom texts, I encountered an issue on Internet Explorer and Edge. The problem is that the bottom text is aligned to the left instead of the center, and its position is in ...

javascripthtmlcsssvgmicrosoft-edge

Items seem to vanish into thin air and become immovable when attempting to relocate them

I am attempting to create a unique grid layout with 3x3 dimensions, where each grid item represents a fragment of a single image. These items should have the capability to be dragged and dropped inside another 3x3 grid, in any desired sequence. I have hit ...

javascripthtmlcssdrag-and-dropgrid

Divergent find function behavior in jQuery when applied to div or tbody

I've encountered an issue while using the jQuery find selector by Id with a div and tbody. Let me simplify my problem for better understanding. HTML <div id='iamdiv'>HELLO</div> <table> <tbody id='iamtbody' ...

javascriptjqueryhtmlcssselector

Issue with Anchor class in CakePHP where the variable $action is not defined

I'm struggling to apply a class to my anchor link when it is active. How should I define the $action variable in this case? Version: 4.2.9 Error: Undefined variable: action [ROOT\templates\layout\default.php, line 108] templates/lay ...

phphtmlmodel-view-controllercakephp

Twists and turns as I mix up Kineticjs

After scrambling my puzzle, I now need it to be rotated. Can anyone help me with this? Thanks :) fillPatternImage:imageObj, x:-pieceWidth*i/2, y:-pieceHeight*j/2, stroke: "#000000", ...

javascripthtmlrotationkineticjs

Dynamic Bootstrap User Authentication Form

Currently, I am in the process of constructing a login form for my web application and have opted to use Bootstrap for its styling. To ensure that the screen is responsive, I've integrated the following "Meta Tag" into the structure: <meta name="v ...

htmlcssresponsive-designbootstrap-4responsive

The directive code takes precedence over the controller code and is executed first

A custom directive has been implemented and is utilized as shown below: <div car-form car="car" on-submit="createCar(car)"></div> This directive is used on both the new and edit pages, each with its own controller. The EditCarController retri ...

javascripthtmlangularjsangularjs-directive

Revise directive following the dynamic addition of elements

My Objective: I aim to utilize directives for creating custom elements and dynamically inserting them into the view at various points in time. The Challenge: Upon dynamically adding custom elements to the view, they appear as raw HTML without the directi ...

javascriptjqueryhtmlangularjsangularjs-directive

Clicking on the input triggers the appearance of a border using the OnClick function

I am currently developing my own website with a login feature that requires input tags of text-type. I would like to implement a functionality where clicking on these input tags will display a border, even when the mouse is not directly hovering over them. ...

javascripthtmlcssonclick