<p id="" class="tooltip">
説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
</p>
p.tooltip{
margin: 0;
padding: 10px;
width: 250px;
min-height: 30px;
background-color: #DFF8FF;
opacity: 1;
border-radius: 5px;
-moz-border-radius: 5px;
color: #000;
position: absolute;
top: 100px;
left: 20px;
border: 5px solid #5DC7EB;
-webkit-box-shadow: 1px 2px 2px 0px rgba(133,133,133,1);
-moz-box-shadow: 2px 2px 2px 0px rgba(133,133,133,1);
box-shadow: 2px 2px 2px 0px rgba(133,133,133,1);
}
p.tooltip:before {
/*
border-top-width: 16px;
border-right-width: 16px;
border-bottom-width: 0;
border-left-width: 16px;
border-color: #5DC7EB transparent;
border-style: solid;
display: block;
position: absolute;
bottom: -16px;
left: 116px;
width: 0;
height: 0;
content: "";
*/
display: block;
content: "";
border-color: transparent #5DC7EB #5DC7EB transparent;
border-width: 5px;
border-style: solid;
width: 0;
-webkit-transform: rotate(45deg);
position: absolute;
left: 50%;
bottom: -10px;
margin: -6px 0 0 -5px;
-webkit-box-shadow: 2px 2px 3px rgba(133,133,133,1), 0px 0px 0px #000;
}
p.tooltip:after {
/*
border-top-width: 16px;
border-right-width: 16px;
border-bottom-width: 0;
border-left-width: 16px;
border-color: #DFF8FF transparent;
border-style: solid;
display: block;
position: absolute;
bottom: -10px;
left: 116px;
width: 0;
height: 0;
*/
-webkit-transform: rotate(45deg);
display: block;
content: "";
position: absolute;
left: 54%;
bottom: -3px;
margin: -9px 0px 0 -20px;
height: 13px;
width: 16px;
background-color: #DFF8FF;
}