CODEWITHSUNDEEP
htmlcssvue.js
Sourabh Kulkarni
Sourabh Kulkarni

Reputation: 37

adjust the content inside the width

i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip. its more of the badge on hover i need to show the content also we can have a max width of 500px and height no restrictions. Also you could see that on hover the tooltip is not coming exactly down of the respective item on which it is hovered. This is what i have tried, below is my code

 .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 orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span
          >
        </span>
      </span>

Upvotes: 1

Views: 135

Answers (2)

Lakshan Costa
Lakshan Costa

Reputation: 643

The reason for the element is not in the proper width is that it should increase the max-width. I changed the max width to 50px. it was at 40px

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

I added a min-width, max-width and padding for the long text as follows

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

}

You can break the lines of the paragraph to get the long text in different lines so you can see the entire thing. Like this

<span class = "new-content"><span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span></span>

You will have to add a class in the css too.

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

Upvotes: 1

user16554867
user16554867

Reputation:

Try this code It will help you

  .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>

Verify my answer if it's work for you

Upvotes: 1

Related Questions