PROWAREtech
CSS: Create a Speech Bubble/Balloon
An example popup speech bubble or balloon.
Create a popup that looks like a speech bubble.
Create speech bubbles that look like this:
This code creates these simple bubbles. If needing to position the speech bubble on the screen to match the position of an element then see the getBoundingClientRect JavaScript article.
<!DOCTYPE html>
<html>
<head>
<title>speech bubbles</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #ffd800;
font-family: sans-serif;
}
.bubble {
position: relative; /* this can be absolute or fixed if need be */
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
width: 150px;
padding: 15px;
z-index: 10;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
color: darkblue;
}
.bubble::before {
content: "";
position: absolute;
border-style: solid;
left: 15px;
}
.bubble::after {
content: "";
position: absolute;
border-style: solid;
left: 16px;
}
.bubbleTop::before {
/* top right bottom left */
border-width: 8px 10px 0 1px;
border-color: #ccc transparent transparent transparent;
bottom: -8px;
}
.bubbleTop::after {
border-width: 7px 9px 0 0;
border-color: #fff transparent transparent transparent;
bottom: -7px;
}
.bubbleBottom::before {
border-width: 0 10px 8px 1px;
border-color: transparent transparent #ccc transparent;
top: -8px;
}
.bubbleBottom::after {
border-width: 0 9px 7px 0;
border-color: transparent transparent #fff transparent;
top: -7px;
}
</style>
</head>
<body>
<div class="bubble bubbleTop">Downloading data...</div>
<p>Speech Bubble on top.</p>
<p>Speech Bubble on bottom.</p>
<div class="bubble bubbleBottom">Downloading data...</div>
</body>
</html>
If wanting to add box-shadow then remove the .bubble::after {} and .bubbleTop::after {} sections at the same time because there is no way to add a shadow that follows all the lines (unless a hard-edged shadow is acceptable), and this will make the arrow look as though it is in the shadow of the box. For example:
Use JavaScript offsetHeight and offsetWidth to determine the bubble's height and width in order to position it properly. These are not CSS properties. For this to work display can not be set to none.
var bubble = document.getElementById("bubble");
var height = bubble.offsetHeight;
var width = bubble.offsetWidth;Coding Video
Comment
