We would like to know how to create Text balloon with arrow and drop-shadow.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.tooltip {<!--from ww w.j av a 2 s.c o m-->
display: inline-block;
padding: 15px;
background: #fff;
position: relative;
max-width: 200px;
margin: 20px 0 0 20px;
-webkit-filter: drop-shadow(0 0 10px gold);
-moz-filter: drop-shadow(0 0 10px gold);
filter: drop-shadow(0 0 10px gold);
}
.tooltip:after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid white;
position: absolute;
bottom: -12px;
left: 50%;
}
.tooltip:focus {
outline: dotted 1px #888;
}
input {
margin: 40px 20px;
}
</style>
</head>
<body>
<div class="tooltip">OK...</div>
</body>
</html>
The code above is rendered as follows: