how to make size of speech box auto

Question

I had created A speech box but I face problems in it I can't able to make a speech box change its size(height and width) automatically according to need. It should acquire space according to its content. If the content in it is large box size should fix in it If the content is small box should auto reduce in size

.hide {
  display: none;
}

.speech {
  position: absolute;
  left: 0;
  top: -22rem;
  width: 400px;
  height: 300px;
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #ff5733;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  display: none;
}

.speech:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 300px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

.speech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 300px;
  border: 25px solid;
  border-color: #ff5733 transparent transparent #ff5733;
}

.myDIV {
  position: relative;
}

.myDIV:hover .speech {
  display: block;
  color: green;
}

<h2>Display an Element on Hover</h2>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p>
<p>Other content</p>
<p>Other content</p></span></span></span> well I am moe optional
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional

score 1 · Accepted Answer · answered Apr 19 '20 at 08:29

Below the updated code. Check the comments:

.hide {
  display: none;
}

.speech {
  position: absolute;
  left: 0;
  /*top: -22rem; removed*/
  bottom:calc(100% + 33px); /* added */
  width: 400px;
  /* height: 300px; removed */
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #ff5733;
  border-radius: 30px;
  box-shadow: 2px 2px 4px #888;
  display: none;
}

.speech:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  /*top: 300px; removed*/
  top:100%; /* added */
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

.speech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  /*top: 300px; removed*/
  top:100%; /* added */
  border: 25px solid;
  border-color: #ff5733 transparent transparent #ff5733;
}

.myDIV {
  position: relative;
}

.myDIV:hover .speech {
  display: block;
  color: green;
}

<h2>Display an Element on Hover</h2>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p>
<p>Other content</p>
<p>Other content</p></span></span></span> well I am moe optional
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional

Thank you soo much I am playing with code for quite a long period you had solved my issue. Once again thanks a lot. — Joohu Kumari, Apr 19 '20 at 11:03
one thing more I want to know when I add some images in speech box it overflows and the overflow portion will hide how to make it visible if through image will overflow. See this URL:-- https://shouttolearn.blogspot.com/2020/04/display-element-on-hover-other-content.html — Joohu Kumari, Apr 19 '20 at 11:41
@JoohuKumari there is overflow:hidden added to the class `.item-post .post-body` — Temani Afif, Apr 19 '20 at 11:46
I want to know that is there any way that in condition of overflow i.e no more space to show complete box. The direction of arrow and box changes. If box is pop out upward and due to overflow the box can't appear completely so automatically it will popup downwards. Can it be possible? Please help me in solving this problem. — Joohu Kumari, Apr 19 '20 at 15:24
@JoohuKumari you cannot do such thing with CSS only, you will need a complex JS code. Better ask a new question if you want to get help on this — Temani Afif, Apr 20 '20 at 09:19

how to make size of speech box auto

1 Answers1