CSSだけで作るツールチップ（tooltip）その（２）フキダシ型です。ツールチップ（tooltip）その（１）はこちら。
次のテキストの水色アンダーライン部分にオンマウスすると、ツールチップが発動します。

実装：

HTMLソース

<div style="width:800px;margin:35px auto;">
    0万石&nbsp;WEB受注システムご利用後、カスタマイズの必要性が出てきた場合、
    <span class="tooltip1">百万石&nbsp;WEB受注システムへの移行も可能です。
        <span>
            既存システムの変更不要で即行稼動<br>
            百万石&nbsp;WEB受注システム
        </span>
    </span>
</div>

CSSソース

span.tooltip1{
    display: inline-block;     
    border-bottom:solid 1px #59f;
	position:relative; 
	}
span.tooltip1 span {
    display: none;
    }
div.tooltip1:hover {
    color: #48e;
    }
span.tooltip1:hover span {
    display: block;               
    position: absolute;          
    top: 35px;
    font-size: 90%;
    color: #fff;
    background-color: #37d;
    width: 230px;
    padding: 8px;
    border-radius:6px;
    z-index:100;
    }
span.tooltip1 span:before{
    content:''; 
    display:block; 
    position:absolute;                      
    height:0; 
    width:0; 
    top:-16px; 
    left:35px;
    border:13px transparent solid; 
    border-right-width:0; 
    border-left-color:#37d; 
    transform:rotate(270deg);         
    -webkit-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    z-index:100;
    }