CodePen

HTML

            
                  <div class="bubble">
       <div class="arrow"></div>
      <div class="speach">Some text</div>
    </div>

    <div class="bubble">
       <div class="arrow"></div>
         <div class="speach"></div>
    </div>

            
          
!
via HTML Inspector

CSS

            
              .bubble { 
  overflow:hidden; 
  margin:5px 0 0 0;
}
.bubble .speach { 
  background-color:#333333; 
	color:#FFFFFF;
	padding:5px;
	margin:0; 
	font-size: 12px;
	font-family: Segoe UI;
  text-transform: lowercase; 
}
.bubble .arrow {
  margin:0 0 0 15px;
	width:0;
	height:0; 
  border-left: 0px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #333333;
	border-top: 0;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.speach').each(function() {
    if (!$(this).text()) {
        $(this).parents('.bubble').hide();
    }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................