@extends('layouts.master')

@section('main-content')
    <div class="breadcrumb">
                <h1>تول تیپ</h1>
                <ul>
                    <li><a href="">اجزاء</a></li>
                    <li>تول تیپ</li>
                </ul>
            </div>

            <div class="separator-breadcrumb border-top"></div>

            <div class="row mb-4">
                <div class="col-md-12">
                    <h2>تول تیپ</h2>
                    <p></p>
                </div>
            </div>

            <div class="row mb-4">


                <div class="col-md-12 mb-4">
                    <div class="card text-left">

                        <div class="card-body">
                            <h4 class="card-title mb-3">تول تیپ اصلی</h4>
                            <p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.</p>
                            <div class="row">
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-default m-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                       تول تیپ در بالا
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-default m-1" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                        تول تیپ در راست
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-default m-1" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                        تول تیپ در پایین
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-default m-1" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                        تول تیپ در چپ
                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of col -->

                <div class="col-md-12 mb-4">
                    <div class="card text-left">

                        <div class="card-body">
                            <h4 class="card-title mb-3">دکمه رنگی راهنمای ابزار اصلی</h4>
                            <p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.</p>
                            <div class="row">
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-primary m-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                        تول تیپ ر بالا
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-info" d m-1ata-toggle="tooltip" data-placement="right" title="Tooltip on right">
                       تول تیپ در راست
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-success m-1" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                        تول تیپ در پایین
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-warning m-1" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                        تول تیپ در چپ
                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of col -->

                <div class="col-md-12 mb-4">
                    <div class="card text-left">

                        <div class="card-body">
                            <h4 class="card-title mb-3">راهنمایی ابزار</h4>
                            <p>با استفاده از راهنمای ابزار شروع می شود - کلیک | شناور | focus | manual options. You may pass multiple triggers; separate them with a space. "manual" cannot be combined with any other trigger.</p>
                            <div class="row">
                                <div class="col-md-3">
                                    <p>
                                        استفاده <code>data-trigger="click"</code> for click trigger.
                                    </p>
                                    <button data-trigger="click" type="button" class="btn btn-primary m-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                        on click trigger
                    </button>

                                </div>
                                <div class="col-md-3">

                                    <p>
                                        Use <code>data-trigger="focus"</code> for focus trigger.
                                    </p>
                                    <button data-trigger="focus" type="button" class="btn btn-info" d m-1ata-toggle="tooltip" data-placement="right" title="Tooltip on right">
                        on focus trigger
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <p>
                                        Use <code>data-trigger="hover"</code> for hover trigger.
                                    </p>
                                    <button data-trigger="hover" type="button" class="btn btn-success m-1" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                        on hover trigger
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <p>
                                        Use <code>data-trigger="manual"</code> for manual trigger.
                                    </p>
                                    <button id="manual" data-trigger="manual" type="button" class="btn btn-warning m-1" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                        manual trigger
                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of col -->

                <div class="col-md-12 mb-4">
                    <div class="card text-left">

                        <div class="card-body">
                            <h4 class="card-title mb-3"> تنظیمات تول تیپ</h4>
                            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
                            </p>
                            <div class="row">
                                <div class="col-md-3">
                                    <p>
                                        استفاده <code>data-animation="true"</code> برای انیمیشن
                                    </p>
                                    <button data-animation="true" type="button" class="btn btn-primary m-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                       با انیمیشن
                    </button>

                                </div>
                                <div class="col-md-3">

                                    <p>
                                        استفاده <code>data-animation="false"</code> برای بدون نمایش
                                    </p>
                                    <button data-animation="false" type="button" class="btn btn-info" d m-1ata-toggle="tooltip" data-placement="right" title="Tooltip on right">
                        بدون انیمیشن
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <p>
                                        استفاده <code>data-delay="1000"</code> for 1000ms delay.
                                    </p>
                                    <button data-delay="1000" type="button" class="btn btn-success m-1" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                                    تاخیر انداختن
                    </button>
                                </div>
                                <div class="col-md-3">
                                    <p>
                                        استفاده <code>data-html="true"</code> برای html .
                                    </p>
                                    <button data-html="true" type="button" class="btn btn-warning m-1" data-toggle="tooltip" data-placement="left" title="Tooltip With <em>html</em>">
                        نشادن دادن Html
                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end of col -->


            </div>
            <!-- end of row -->
@endsection

@section('page-js')
<script src="{{asset('assets/js/tooltip.script.js')}}"></script>
@endsection
