tootips 1.9

Question

：どのようにここで花

Answer 1

を受けている者がいるため、これが提出を示すためのツールヒントがあります

Step-1 : open file app\design\frontend\rwd\default\template\checkout\onepage\shipping.phtml and paste css 
<style> 
.tooltip { 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; 
} 

.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 120px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -60px; 
    opacity: 0; 
    transition: opacity 1s; 
} 

.tooltip .tooltiptext::after { 
    content: ""; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: #555 transparent transparent transparent; 
} 

.tooltip:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
} 
</style> 

ステップ-2：

を見つけるCSS

例を使用してチェックアウトページにツールチップを表示することができます0

とテンプレートファイルのチェックアウト/ 1ページ分/ shipping.phtmlにツールチップを追加することができます

<label class="tooltip" for="shipping:company"><span class="tooltiptext">Tooltip text</span><?php echo $this->__('Company') ?></label>