@extends('component-base.layout')

@section('title')
Tooltip
@endsection

@push('css')
<link rel="stylesheet" href="/css/component-base/tooltip/tooltip.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
<style>
    .wrapper {
        width: 500px;
    }
    .wrapper-sample {
        margin: 50px 20px 0 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    #vue-element {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
</style>
@endpush

@section('contents')
<div id="vue-element" v-cloak>
    <div style="font-weight: bold;">Tooltips</div>
    <div class="wrapper">
        <div class="wrapper-sample">
            <lme-tooltip content="上に表示する" position="top" arrow="center">
                <lme-button-flat>Arrow Center</lme-button-flat>
            </lme-tooltip>

            <lme-tooltip content="上に表示する" position="top" arrow="left">
                <lme-button-flat>Arrow Left</lme-button-flat>
            </lme-tooltip>

            <lme-tooltip content="上に表示する" position="top" arrow="right">
                <lme-button-flat>Arrow Right</lme-button-flat>
            </lme-tooltip>
        </div>

        <div class="wrapper-sample">
            <lme-tooltip content="下に表示する" position="bottom" arrow="center">
                <lme-button-flat>Arrow Center</lme-button-flat>
            </lme-tooltip>

            <lme-tooltip content="下に表示する" position="bottom" arrow="left">
                <lme-button-flat>Arrow Left</lme-button-flat>
            </lme-tooltip>

            <lme-tooltip content="下に表示する" position="bottom" arrow="right">
                <lme-button-flat>Arrow Right</lme-button-flat>
            </lme-tooltip>
        </div>

        <div class="wrapper-sample">
            <lme-tooltip content="右に表示する" position="right">
                <lme-button-flat>Position Right</lme-button-flat>
            </lme-tooltip>

            <lme-tooltip content="左に表示する" position="left">
                <lme-button-flat>Position Left</lme-button-flat>
            </lme-tooltip>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="/js/component-base/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/tooltip/tooltip.js?v={{config("sns-line.version")}}"></script>
@endpush