スマートデザインサポート

ツールチップに関する機能の説明と使用例です

タイプ

アイコン(デフォルト)

ツールチップ(ヘルプ)の大きさやデザインを変更したい場合、各モジュールのCSSファイルを編集してください。
ツールチップはボタンを囲む親要素を必要とします。また、ツールチップにはタイトルと内容が含まれます。

<div class="ec-base-tooltip-area show">
    <button type="button" class="btnTip eTip">ヘルプ</button>
    <div class="ec-base-tooltip" style="display: block;">
        <strong class="title">ツールチップのタイトル</strong>
        <div class="content">
            <ul>...</ul>
            <button type="button" class="btnClose eClose">閉じる</button>
        </div>
    </div>
</div>

日本語ショップ会員登録用input要素

ボタンより上の方向にツールチップを表示させたい場合、typeUpperを追加します。

<div class="ec-base-tooltip-area show">
    <span class="eTip">
        <input type="text" />
     </span>
    <div class="ec-base-tooltip typeUpper" style="display: block;">
        <div class="content">
           <span class="txtWarn">...</span>
           <button type="button" class="btnClose eClose">閉じる</button>
        </div>
    </div>
</div>

送料割引

インタラクションが変数で定義されているため、tooltipArea、eTip、eCloseを追加しません。
注文の際、カートページで使用できます。

<div class="shippingFee">
    <a href="#none" class="btnNormal mini" id= "{$변수}">詳細</a>
    <div class="ec-base-tooltip">
        <strong class="title">送料割引</strong>
        <div class="content">
            <strong class="title">{$変数}</strong>
            <div class="ec-base-table">
                <table border="1">
                    <caption>送料割引イベント情報</caption>
                </table>
            </div>
        </div>
        <button type="button" class="btnClose">閉じる</button>
    </div>
</div>

Eximbay DCC(Dynamic Currency Conversion)

他とは異なり、固定(Fixed)されるタイプのレイヤーです。マイページの注文履歴などで使用できます。
インタラクションが変数で定義されているため、tooltipArea、eTip、eCloseを追加しません。

<div class="eximbayDCC">
    DCC <a href="#none" onclick="{$変数}" class="btnTip">Help</a> : {$変数}
    <div class="ec-base-tooltip" id="{$変数}">
        <strong class="title">Eximbay DCC (Dynamic Currency Conversion)</strong>
        <div class="content">
            <ul>...</ul>
            <a href="#none" onclick="{$変数}" class="btnClose">Close</a>
        </div>
    </div>
</div>

Cafe24 Smart design Support

Tooltip

タイプ

アイコン(デフォルト)

日本語ショップ会員登録用input要素

送料割引

Eximbay DCC(Dynamic Currency Conversion)