modify the material to fit within the specified width

I am facing an issue with my tooltip as the data it displays is overflowing the width of the tooltip. I want to adjust the content to fit within the tooltip width. The tooltip is essentially a badge that shows additional information on hover. I want to set a maximum width of 500px without any height restrictions. Additionally, when hovering over the tooltip, it does not align exactly below the item it is hovering over. Below is the code I have attempted:

 .lightgrey-badge {
width: auto;
height: 20px;
padding: 0px 8px 0px 8px;
border-radius: 4px;
background-color: #f2f2f2;
  }
  .lightgrey-badge-text {
font-size: 12px;
font-weight: 600;
text-align: center;
color: #595959;
vertical-align: middle;
  }
.border {
  border-radius: 20px;
  border: solid 2px #595959;
}

.lightgrey-badge-text-elipses {
  display: inline-block;
  max-width: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltiptext {
  visibility: hidden;
  max-width: 250px;
  height: 50px;
  opacity: 0.6;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 9999;
  margin-top: 28px;
  margin-left: -150px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.lightgrey-badge:hover .tooltiptext {
  visibility: visible;
}
 <span
        class="lightgrey-badge border"
        style="margin-right: 5px"
      >
        <span
          class="lightgrey-badge-text lightgrey-badge-text-elipses"
          >Element
          <span class="tooltiptext">
            <span style="width: fit-content"> this s the dummy data the original will look something like this a big long test. I have created a tooltip and the data it shows is getting overflowed, so I want to fit the content inside the width of the tooltip</span></span
          >
        </span>
      </span>

htmlcssvue.js

Answer №1

The element is not displaying at the proper width because the max-width needs to be increased. I adjusted the max width from 40px to 50px.

.lightgrey-badge-text-elipses {
  max-width: 50px;
}

To accommodate long text, I included min-width, max-width, and padding with the following values:

.tooltiptext {
  min-width: 100px;
  max-width: 500px;
  padding-left: 100px;
  padding-right: 50px;
}

If the text is too long and needs to be displayed on multiple lines, you can break the lines using the following technique:

<span class = "new-content"><span style="width: fit-content"> this is dummy data and the original will look something like this with a big long test. I have created a tooltip but the data is overflowing. I want to fit the content inside the width of the tooltip</span></span></span>

Don't forget to add the corresponding class in the CSS file:

.new-content {
  white-space: pre-wrap;
}

Answer №2

Check out this helpful code snippet:

  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    display: block;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
<!DOCTYPE html>
<html>


<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <br><br>
  <div class="tooltip">Hover over me Hover over me
    <span class="tooltiptext">blah bla blaa a bal  blak a ba b alj ang</span>
  </div>
  <br><br>
  <div class="tooltip">Hover over me Hover over me 3
    <span class="tooltiptext">askdjf ksfjlskd flsaa flsjdlfj sdfk sadkjflskd af sdkjf lsdkf sdljf</span>
  </div>
</body>

</html>

If this solution works for you, please confirm my answer

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

Update the icon within the expandable display

Is there a way to change the plus sign to a minus sign in an expandable table view on click? (changing fa fa-plus to fa fa-minus) The goal is to have the plus sign displayed when the view is compressed and the minus sign displayed when it is expanded. If ...

javascriptjquerycss

Exit PopUp malfunctions and fails to function correctly

Hey everyone, I'm having an issue with my exit PopUp. It was working fine initially, but now it doesn't appear again when I scroll down the site page. Can someone please help me figure out what's going wrong? Sorry for any confusion, and tha ...

phpjqueryhtmlcsspopup

The troubleshooting of compatibility issues between TailwindCSS and HTML Input and Button tags

Recently, I decided to switch from using plain CSS to TailwindCSS for styling the navbar component that I obtained from the Bootstrap website. While TailwindCSS has helped me style most parts of the navbar successfully, I have encountered a challenge with ...

htmlcssbootstrap-4next.jstailwind-css

Attempting to access a variable without wrapping it in a setTimeout function will

I have a form without any input and my goal is to automatically set the "responsible clerk" field to the currently logged-in user when the component mounts. Here's what I have: <b-form-select v-model="form.responsible_clerk" :op ...

javascriptvue.jsvuexbootstrap-vue

How can we adjust the flex values to ensure the label displays properly on a narrow container width?

The labels in the left column of the form are initially sized correctly, but shrink when there is not enough room. However, there's a discrepancy in label size between rows with 2 items and rows with 3 items. body { font-family: Arial; font-siz ...

htmlcssflexbox

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

htmlcsshref

Generating an HTML table with JSON data in JavaScript

I'm still struggling with JavaScript as a beginner, so please bear with me and provide guidance step by step. Also, try to avoid overwhelming the comments with links as it confuses me. This is an attempt to bypass the CORS issue. <!D ...

javascripthtmljson

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

htmlcssflexboxpositioning

Countdown malfunction: wrong date displayed

Utilizing the Countdownjs library in my project is resulting in an incorrect day count. Incorporating AngularJS, here is the custom directive I've implemented for the countdown: .directive('tempoPercorrido', function($interval){ ret ...

javascripthtmlangularjsangularjs-directivecountdown

Updating the meta field in the router of a Vue.js project with Gridsome

I am currently attempting to define a meta object for a route that has been automatically generated for me by Gridsome. Here is an example of what I am trying to achieve: meta: { auth: true } The challenge I am facing is that Gridsome does not ...

vue.jsvue-routergridsome

Is there a way to verify if an HTML popover is currently displayed?

Is there a method using JavaScript to determine if the popover is open when utilizing the new popover API? <button popovertarget="pop">Trigger the popover</button> <div popover id="pop">This is the content of the popover!</div> ...

htmlpopover

The onKeyUp event is not functioning as expected in React, unlike the onChange event

For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...

javascripthtmlreactjsonkeyup

Utilizing REACT to dynamically load multiple HTML elements

Recently, I began developing with React and wanted to load multiple new Input Fields and Labels in a Form using Hooks. However, when clicking the button, only one input field is created using the last value of my array. Upon checking the console, I notic ...

htmlreactjs

Experiencing issues launching the server.js file on Node.js while incorporating socket.io

Several months ago, I was able to successfully run this code without any issues. However, recently I have encountered some unexpected problems. This code is for a whiteboard app that can be viewed on this link. The current issue I am facing is that when ...

javascripthtmlnode.jssocket.io

What is the best way to fetch HTML content using JavaScript?

I needed to incorporate JavaScript for fetching HTML code. I structured the HTML code in the following manner; <html> <div id="tesingCode"> <h1>Title</h1> <p>testOfCodetestOfCodetestOfCodetestOfCode</p> </div ...

javascripthtmlpolymerpolymer-1.0

Similar to using `display:flex` and `justify-content: center`, you can achieve centered

I have a group of n children within a div. I want to arrange them in a single row and center them horizontally. If I were to use flexbox, I could achieve this by: display: flex; justify-content: center; Is there a way to accomplish the same layout using ...

cssflexboxgrid-layout

Display duplicated options with Bootstrap selectpicker and organize them into optgroups

I have encountered an issue while trying to create a selectpicker using Bootstrap 5 with optgroups. The problem is that all option elements under each optgroup are identical and do not match the HTML structure I have defined in my file. This inconsistency ...

htmltwitter-bootstrapselectbootstrap-5

Storing External Cached Data

I am facing an issue while trying to save cached webView files to a specific directory on the SD-card. I have set up HTML5 and a cache-manifest file on the server. Despite using the setAppCachePath method to designate an external directory on the sd card, ...

androidhtmlcachingwebview

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

javascripthtmlcsssvgcss-transitions

Incorporating text overlays on images that are compatible with responsive websites is a top priority for me

This is a piece of HTML code that utilizes bootstrap 3 for design purposes. The challenge faced is related to positioning text over an image. When resizing the browser, the alignment of the text with the background gets disturbed. Assistance is needed in r ...

htmlcsstwitter-bootstrap-3bootstrap-modal