CODEWITHSUNDEEP
css
sisimh
sisimh

Reputation: 1337

arrow down position in div

I am new to CSS and I was wondering how to do a div with a bottom arrow this is the code I have reached so far :

.tooltip-content-m {
  display: none;
  position: absolute;
  padding: 10px;
  border-radius: 4px;
  background: @gray-dark;
  font-size: 12px;
  color: @white;
  width: 180px;
  left: 5px;
  z-index: 10;
}

and for the bottom arrow :

.arrow-down {
  bottom: -27px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent; 
  border-top: 10px solid @gray-dark; 
  width: 0; 
  height: 0; 
}

the thing is I want the arrow-down to always be visible no matter how many lines I write in the div , this is not the case in my code when I place more content that writes a new line in the box , the arrow-down will no longer appear . How to make it dynamic ?

HTML

<span class="tooltip-content-m">
    <span class="tooltip-wrapper">
        <button class="close">x</button>
        <div>---content goes here---</div>
        <div class="arrow-down"></div>
    </span>
</span>

FIDDLE : https://jsfiddle.net/xzsya7tm/

Thanks !

Upvotes: 0

Views: 929

Answers (2)

Paulie_D
Paulie_D

Reputation: 115009

Your tooltip structure is a little too complex and you don't even need an extra div for the arrow...you can do that with a pseudo-element.

.tooltip {
  position: relative;
  padding: 10px;
  border-radius: 4px;
  background: #004;
  font-size: 12px;
  color: #FFF;
  display: inline-block;
  max-width: 180px;
}
.tooltip::after {
  content: '';
  top: 100%;
  left: 10%;
  position: absolute;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #004;
}
.tooltip .close {
  padding: 5px;
}
<div class="tooltip">
  <button class="close">x</button>
  <div>---content goes here---</div>
</div>



<div class="tooltip">
  <button class="close">x</button>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolores, iure numquam laborum repellendus ad.</p>
  </div>
</div>

Upvotes: 2

Muralikanth Anumula
Muralikanth Anumula

Reputation: 13

Please change the bottom CSS -20px(instead of -27px).. instead of this your code is working fine.

jsfiddle.net/xzsya7tm/2/

.arrow-down {bottom: -20px;...

Upvotes: 0

Related Questions