CODEWITHSUNDEEP
css
raj keviv
raj keviv

Reputation: 159

how to give max width with position absolute

.tooltip{
  display: inline-block;
  position: relative;
}
.tooltip-outer  {
  visibility: hidden;
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-size: 13px;
  word-wrap: break-word;
  opacity: 0;
  text-align: left;
}

.tooltip-inner  {
   max-width: 200px;
   padding: 3px 8px;
   color: #fff;
   background-color: #000;
   border-radius:2px;
}

.tooltip:hover .tooltip-outer{
    visibility: visible;
    opacity: 1;
}

[tooltip-direction = 'right']
{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="tooltip">
  hover me
  <div class="tooltip-outer" tooltip-direction="right">
    <div class="tooltip-inner">
      Don't let fear or insecurity stop you from trying new things.
    </div>
  </div>
</div>

In the above code, I have used position relative for parent and position absolute for the child, so due to this, my max-width is not considered.

how to set max-width with the position absolute?

Upvotes: 0

Views: 3703

Answers (3)

Aliaksandr Sushkevich
Aliaksandr Sushkevich

Reputation: 12364

Just try to add width: max-content; to an absolutely positioned element to stretch its content.

.tooltip-outer  {
  position: absolute;
  width: max-content;
}

Upvotes: 2

kumar
kumar

Reputation: 283

.tooltip{
  /*display: inline-block;*/
  position: relative;
}
.tooltip-outer  {
  visibility: hidden;
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-size: 13px;
  word-wrap: break-word;
  opacity: 0;
  text-align: left;
}

.tooltip-inner  {
   max-width: 200px;
   padding: 3px 8px;
   color: #fff;
   background-color: #000;
   border-radius:2px;
}

.tooltip:hover .tooltip-outer{
    visibility: visible;
    opacity: 1;
}

[tooltip-direction = 'right']
{
  left:80px; /*change this line*/
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="tooltip">
  hover me
  <div class="tooltip-outer" tooltip-direction="right">
    <div class="tooltip-inner">
      Don't let fear or insecurity stop you from trying new things.
    </div>
  </div>
</div>

Upvotes: 1

sunil kumar
sunil kumar

Reputation: 301

You have to define width and max-width in same time

Ex.

.tooltip-inner  {
   max-width: 200px;
   width: 100%;
   padding: 3px 8px;
   color: #fff;
   background-color: #000;
   border-radius:2px;
}

Hope this will help you

Upvotes: 1

Related Questions