Divide words onto separate lines and shift them out of place

I'm tackling the challenge of crafting a basic tooltip without relying on JavaScript.

I'm pondering the most effective approach to achieve this. I aim to have the tooltip container accommodate dynamic text seamlessly, adjusting responsively atop its container. The current issue lies in the fact that the text does not naturally expand, causing words to break into new lines, altering the overall height and resulting in misaligned positioning and container overlap.

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  height: 25px;
  width: 25px;
  position: relative;
}

div {
  position: absolute;
  top: -25px;;
}

span {
  display: inline-block;
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  font-size: 15px;
  padding: 5px;
  width: auto;
}

td:hover div span {
  display: inline-block;
}
<table>
  <tr>
    <td>
    something
      <div>
        <span>
          text
        </span>
      </div>
    </td>    
    <td>
    something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

htmlcss

Answer №1

Do you mean something like this? Please let me know.

If you wish to place your tooltip above the hover item, simply add bottom:100% to the tooltip element. 

table {
  margin-top: 100px;
}

td {
  border: solid 1px #000;
  height: 25px;
  width: 150px;
  position: relative;  
  /*style for better visibility*/
  display:block;
  margin-right:50px;
  float:left;
}

div {
  position: absolute;
  bottom: 100%;
  left:50%;
  width:60px;
  margin-left:-30px;
}

span {
  display: none;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-size: 15px;
  padding: 5px;
  width: auto;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
  width:100%;
  text-align:center;
}

td:hover div span {
  display: inline-block;
}
<table>
  <tr>
    <td>
      something
      <div>
        <span>
          text
        </span>
      </div>
    </td>
    <td>
      something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

Answer №2

If you prefer to keep text intact within a tooltip, you can utilize white-space: nowrap. Another option is to employ transform: translate() to centrally position the tooltip within a td With arrow

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  white-space: nowrap;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

td:hover span {
  opacity: 1;
}
<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

Alternatively, if you wish for the tooltip to match the size of the td, you can apply width: 100%

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

td:hover span {
  opacity: 1;
}
<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

You can also utilize the :after pseudo element to append a small arrow beneath the tooltip 

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 5px;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

span:before {
  width: 0; 
  height: 0; 
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid black;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}

td:hover span {
  opacity: 1;
}
<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

Answer №3

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  height: 25px;
  width: 25px;
  position: relative;
}

div {
  position: absolute;
  top: -25px; ;
}

span {
  display: inline-block;
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  font-size: 15px;
  padding: 5px;
  width: auto;
white-space: nowrap;
}

td:hover div span {
  display: inline-block;
}
<table>
  <tr>
    <td>
    something
      <div>
        <span>
          text
        </span>
      </div>
    </td>    
    <td>
    something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

Consider incorporating white-space: nowrap; in your CSS style.

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

Cropper.js, effortlessly populating a container with a perfectly centered image

I took inspiration from the cropper.js library website but made modifications. You can check out the original example here. Here's my version of the modified example: CodePen Link var image1 var cropper1 var image2 var cropper2 ...

javascriptcsscropperjs

How to harness the power of loops in JavaScript

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid' ...

javascriptjquerycsscss-transitions

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

javascriptphpjqueryhtmlajax

Incorporating JSON data into an HTML table

Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...

javascripthtmljson

Troubleshooting: Custom checkbox using CSS ::before does not display properly on Firefox and Edge browsers

Encountering a frustrating CSS challenge while working on a project that needs to be compatible across various browsers. Specifically, I'm having issues with custom styling for checkboxes. Despite following recommendations to use a ::before pseudo-ele ...

htmlcsscheckboxcross-browserpseudo-element

Adding the AJAX response to the specified element's ID

I'm having trouble inserting radio buttons into a <div> on my page using an AJAX response. The code I have looks like this: // AJAX form for updating tests after category selection $('#categories').change(function(){ category_id ...

javascripthtmljquery

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Referring to this example: http://jsfiddle.net/CZk8L/4/ I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this? This has been bothering me for hours, as I need the p ...

htmlcss-positionspacecss

In Firefox, the HTML label fails to activate the corresponding input field when the mouse is moved while clicking

If you click on the label in the example below, it will change the state of the input. document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: no ...

javascripthtmlcsslabel

Discover the power of EJS embedded within HTML attributes!

There are two cases in which I am attempting to use an EJS tag within an HTML attribute. SITUATION 1: <input style="background-image: url(<%= img.URL %>)" /> SITUATION 2: <input onchange="handleCheckboxChange(<%= i ...

javascripthtmlnode.jsejs

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

javascriptcss

Having trouble retrieving an object property in HTML or TypeScript within an Angular framework?

export class ComponentOne { array_all_items: Array<{ page_details: any }> = []; array_page_details: Array<{ identifier: number, title: string }> = []; initial_item: Array<{ identifier: number, title: string }> = [ { ...

htmlangulartypescript

Guide to creating a custom wrapper for a Material UI component with React JS

I am utilizing the Material UI next library for my project and currently working with the List component. Due to the beta version of the library, some parameter names are subject to change. To prevent any future issues, I have decided to create a wrapper a ...

javascriptcssreactjsmaterial-ui

css Apply styles to form controls only if they are not empty

Utilizing an angularjs form, I have customized the following example to fit my code: .my-5 { margin:100px; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: a ...

htmlcss

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

Manipulating the location where a dropdown menu intersects with a button

Is there a way to adjust the drop-down menu positioning so that it aligns with the button on the top right side of the menu pop-up, rather than the top left as it currently does? Below is the code I have borrowed from an example on W3Schools. .dropbtn ...

htmlcss

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

htmlcss

Exploring the Contrasts: AppBar vs Toolbar in MUI v5

Can you explain the variations between AppBar and Toolbar in MUI? I know that AppBar defaults to 'column' flex direction, while Toolbar defaults to 'row'. Are there any other distinctions? Additionally, why do MUI docs show examples of ...

cssreactjsmaterial-ui

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created. Here is ...

javascriptjqueryhtmlcss

The media query will only impact elements and classes within the index.html file, and will not apply to any other

As I strive to optimize my website for mobile devices, I am encountering an issue with my media queries. The classes don't seem to respond appropriately on any page other than the index.html, and I'm struggling to identify the root cause. Index. ...

htmlcssroutesmedia-queriesmeta-tags

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

asp.netasp.net-mvcvisual-studio-2010html