стрелка вниз положение в DIV

Question

Я новичок в CSS и мне было интересно, как сделать DIV с нижней стрелкой это код, который я достиг до сих пор:

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

и нижней стрелкой:

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

вещь я хочу, чтобы стрелка вниз, чтобы всегда быть видимыми, независимо от того, сколько строк я пишу в DIV, это не так в моем коде , когда я помещаю больше контента, который записывает новую строку в поле, стрелка вниз больше не будет отображаться. Как сделать его динамичным?

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/

Спасибо!

Answer 1

Ваша структура подсказки немного слишком сложная, и вы даже не нужен дополнительный DIV для стрелки ... Вы можете сделать это с псевдо -элемент.

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

Answer 2

Пожалуйста, измените нижний CSS -20px (вместо -27px) .. вместо этого ваш код работает нормально.

jsfiddle.net/xzsya7tm/2/

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