관리-도구

편집 파일: tooltip.blade.php

<div class="">
    <div class="border border-dashed border-primary rounded p-3">
        <div class="row g-4">
            <h2 class="text-primary text-uppercase mb-3">Tooltip</h2>

<div class="col-lg-6">
                 <div class="component-snippets-container">
                    <div class="component-snippets-preview">
                        <div id="liveAlertPlaceholder">
                            <div></div>
                        </div>
                        <button type="button" class="btn btn-secondary"
                            data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
                            data-bs-placement="top" data-bs-title="Supporting line text lorem ipsum">
                            Tooltip Top
                        </button>
                    </div>
                    <div class="position-relative snippets-code-hover">
                        <div class="component-snippets-code-header">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                            </ul>
                            <button class="btn btn-icon copy-button">
                                <i class="fi fi-rr-copy"></i>
                            </button>
                        </div>
                        <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100" id="myTabContent">
                            <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                <div class="component-snippets-code-container">
<pre><code><button type="button" class="btn btn-secondary"
    data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
    data-bs-placement="top" data-bs-title="Supporting line text lorem ipsum">
    Tooltip Top
</button></code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- snippet container ends --}}
            </div>

<div class="col-lg-6">
            {{-- snippet container --}}
            <div class="component-snippets-container">
               <div class="component-snippets-preview">
                   <div id="liveAlertPlaceholder">
                       <div></div>
                   </div>
                   <button type="button" class="btn btn-secondary"
                        data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
                        data-bs-placement="right" data-bs-html="true"
                        data-bs-title="
                        <div class='text-start'>
                            Supporting line text lorem ipsum text lorem ipsum Supporting line Supporting line
                        </div>">
                        Tooltip with Multiple Line
                    </button>
               </div>
               <div class="position-relative snippets-code-hover">
                    <div class="component-snippets-code-header">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                        </ul>
                        <button class="btn btn-icon copy-button">
                            <i class="fi fi-rr-copy"></i>
                        </button>
                    </div>
                    <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100" id="myTabContent">
                        <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                            <div class="component-snippets-code-container">
<pre><code><button type="button" class="btn btn-secondary"
    data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
    data-bs-placement="right" data-bs-html="true"
    data-bs-title="
    <div class='text-start'>
        Supporting line text lorem ipsum text lorem ipsum Supporting line Supporting line
    </div>">
    Tooltip with Multiple Line
</button></code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{-- snippet container ends --}}
                </div>

<div class="col-lg-6">
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                       <div class="component-snippets-preview">
                           <div id="liveAlertPlaceholder">
                               <div></div>
                           </div>
                           <button type="button" class="btn btn-secondary"
                                data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
                                data-bs-placement="right" data-bs-html="true"
                                data-bs-title="
                                <div class='text-start d-flex align-items-start justify-content-between gap-1 mb-0'>
                                    <span>
                                        Supporting line text lorem ipsum
                                    </span>
                                    <img class='svg' width='22' height='22'
                                    src='{{ asset('public/assets/new/back-end/img/svg/shield.svg') }}'>
                                </div>">
                                Tooltip with Icon
                            </button>
                       </div>
                       <div class="position-relative snippets-code-hover">
                            <div class="component-snippets-code-header">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                                </ul>
                                <button class="btn btn-icon copy-button">
                                    <i class="fi fi-rr-copy"></i>
                                </button>
                            </div>
                            <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100" id="myTabContent">
                                <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                    <div class="component-snippets-code-container">
<pre><code><button type="button" class="btn btn-secondary"
    data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
    data-bs-placement="right" data-bs-html="true"
    data-bs-title="
    <div class='text-start d-flex align-items-start justify-content-between gap-1 mb-0'>
        <span>
            Supporting line text lorem ipsum
        </span>
        <img class='svg' width='22' height='22'
        src='{{ asset('public/assets/new/back-end/img/svg/shield.svg') }}'>
    </div>">
    Tooltip with Icon
</button></code></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {{-- snippet container ends --}}
                        </div>

<div class="col-lg-6">
                    {{-- snippet container --}}
                    <div class="component-snippets-container">
                       <div class="component-snippets-preview">
                           <div id="liveAlertPlaceholder">
                               <div></div>
                           </div>
                           <button type="button" class="btn btn-secondary"
                                data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
                                data-bs-placement="right" data-bs-html="true"
                                data-bs-title="
                                <div class='text-start d-flex align-items-start justify-content-between gap-1'>
                                    <span>
                                        Supporting line text lorem ipsum text lorem ipsum Supporting line Supporting line
                                    </span>
                                    <img class='svg' width='22' height='22'
                                    src='{{ asset('public/assets/new/back-end/img/svg/shield.svg') }}'>
                                </div>">
                                Tooltip with Icon multiline
                            </button>
                       </div>
                       <div class="position-relative snippets-code-hover">
                            <div class="component-snippets-code-header">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane" aria-selected="true">Html</button>
                                </ul>
                                <button class="btn btn-icon copy-button">
                                    <i class="fi fi-rr-copy"></i>
                                </button>
                            </div>
                            <div class="tab-content content position-absolute start-0 top-100 shadow-lg bg-white p-1 z-3 mw-100" id="myTabContent">
                                <div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                    <div class="component-snippets-code-container">
<pre><code><button type="button" class="btn btn-secondary"
    data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
    data-bs-placement="right" data-bs-html="true"
    data-bs-title="
    <div class='text-start d-flex align-items-start justify-content-between gap-1'>
        <span>
            Supporting line text lorem ipsum text lorem ipsum Supporting line Supporting line
        </span>
        <img class='svg' width='22' height='22'
        src='{{ asset('public/assets/new/back-end/img/svg/shield.svg') }}'>
    </div>">
    Tooltip with Icon
</button></code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- snippet container ends --}}
                    </div>
                 </div>
    </div>
</div>

관리-도구

편집 파일: tooltip.blade.php

🔐 System Login