310 lines
24 KiB
PHP
310 lines
24 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Tooltip & Popover';
|
|
$subTitle = 'Components / Tooltip & Popover';
|
|
$script = <<<EOD
|
|
<script>
|
|
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
|
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
|
|
|
|
// Boxed Tooltip
|
|
\$(document).ready(function() {
|
|
\$('.tooltip-button').each(function () {
|
|
var tooltipButton = \$(this);
|
|
var tooltipContent = \$(this).siblings('.my-tooltip').html();
|
|
|
|
// Initialize the tooltip
|
|
tooltipButton.tooltip({
|
|
title: tooltipContent,
|
|
trigger: 'hover',
|
|
html: true
|
|
});
|
|
|
|
// Optionally, reinitialize the tooltip if the content might change dynamically
|
|
tooltipButton.on('mouseenter', function() {
|
|
tooltipButton.tooltip('dispose').tooltip({
|
|
title: tooltipContent,
|
|
trigger: 'hover',
|
|
html: true
|
|
}).tooltip('show');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
EOD;
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Tooltip</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="btn btn-primary-50 text-primary-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-title="Primary Tooltip">
|
|
Primary
|
|
</button>
|
|
<button type="button" class="btn btn-lilac-100 text-lilac-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-purple" data-bs-title="Secondary Tooltip">
|
|
Secondary
|
|
</button>
|
|
<button type="button" class="btn btn-success-100 text-success-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" data-bs-title="Success Tooltip">
|
|
Success
|
|
</button>
|
|
<button type="button" class="btn btn-info-100 text-info-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-info" data-bs-title="Info Tooltip">
|
|
Info
|
|
</button>
|
|
<button type="button" class="btn btn-warning-100 text-warning-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-warning" data-bs-title="Warning Tooltip">
|
|
Warning
|
|
</button>
|
|
<button type="button" class="btn btn-danger-100 text-danger-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-danger" data-bs-title="Danger Tooltip">
|
|
Danger
|
|
</button>
|
|
<button type="button" class="btn btn-neutral-100 text-neutral-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" data-bs-title="Dark Tooltip">
|
|
Dark
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Tooltip</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="btn text-secondary-light border input-form-dark radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-title="Primary Tooltip">
|
|
Tooltip On Top
|
|
</button>
|
|
<button type="button" class="btn text-secondary-light border input-form-dark radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="tooltip-primary" data-bs-title="Primary Tooltip">
|
|
Tooltip On Right
|
|
</button>
|
|
<button type="button" class="btn text-secondary-light border input-form-dark radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="tooltip-primary" data-bs-title="Primary Tooltip">
|
|
Tooltip On Left
|
|
</button>
|
|
<button type="button" class="btn text-secondary-light border input-form-dark radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="tooltip-primary" data-bs-title="Primary Tooltip">
|
|
Tooltip On Bottom
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Default Tooltip</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<button type="button" class="btn bg-transparent bg-hover-primary-50 text-primary-600 text-hover-primary-600 border border-primary-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" data-bs-title="primary Tooltip">
|
|
Primary
|
|
</button>
|
|
<button type="button" class="btn bg-transparent bg-hover-lilac-100 text-lilac-600 text-hover-lilac-600 border border-lilac-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-purple" data-bs-title="Secondary Tooltip">
|
|
Secondary
|
|
</button>
|
|
<button type="button" class="btn bg-transparent bg-hover-success-100 text-success-600 text-hover-success-600 border border-success-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" data-bs-title="Success Tooltip">
|
|
Success
|
|
</button>
|
|
<button type="button" class="btn bg-transparent bg-hover-info-100 text-info-600 text-hover-info-600 border border-info-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-info" data-bs-title="Info Tooltip">
|
|
Info
|
|
</button>
|
|
<button type="button" class="btn bg-transparent bg-hover-warning-100 text-warning-600 text-hover-warning-600 border border-warning-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-warning" data-bs-title="Warning Tooltip">
|
|
Warning
|
|
</button>
|
|
<button type="button" class="btn bg-transparent bg-hover-danger-100 text-danger-600 text-hover-danger-600 border border-danger-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-danger" data-bs-title="Danger Tooltip">
|
|
Danger
|
|
</button>
|
|
<button type="button" class="btn bg-transparent bg-hover-neutral-100 text-neutral-600 text-hover-neutral-600 border border-neutral-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" data-bs-title="Dark Tooltip">
|
|
Dark
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Tooltip Popover Positions</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<div class="">
|
|
<button type="button" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="">
|
|
Primary
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">Primary</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<button type="button" class="tooltip-button btn bg-success-600 text-white border border-success-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-success" title="">
|
|
Success
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">Success</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<button type="button" class="tooltip-button btn bg-info-600 text-white border border-info-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-info" title="">
|
|
Info
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">Info</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<button type="button" class="tooltip-button btn bg-warning-600 text-white border border-warning-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-warning" title="">
|
|
warning
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">Warning</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<button type="button" class="tooltip-button btn bg-danger-600 text-white border border-danger-600 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-danger" title="">
|
|
Danger
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">Danger</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<button type="button" class="tooltip-button btn bg-neutral-900 text-base border border-neutral-900 radius-8 px-32 py-11" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-dark" title="">
|
|
Dark
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">Dark</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Tooltip Text popup</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<ul class="list-decimal ps-20">
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">popup</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">popup</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">popup</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">popup</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light">
|
|
This is tooltip text
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">popup</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card h-100 p-0">
|
|
<div class="card-header border-bottom bg-base py-16 px-24">
|
|
<h6 class="text-lg fw-semibold mb-0">Tooltip Text with icon popup </h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex flex-wrap align-items-center gap-3">
|
|
<ul class="list-decimal ps-20">
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text popup
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">
|
|
<iconify-icon icon="jam:alert" class="text-primary-light text-lg mt-4"></iconify-icon>
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text popup
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">
|
|
<iconify-icon icon="jam:alert" class="text-primary-light text-lg mt-4"></iconify-icon>
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text popup
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">
|
|
<iconify-icon icon="jam:alert" class="text-primary-light text-lg mt-4"></iconify-icon>
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light mb-8">
|
|
This is tooltip text popup
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">
|
|
<iconify-icon icon="jam:alert" class="text-primary-light text-lg mt-4"></iconify-icon>
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
<li class="text-secondary-light">
|
|
This is tooltip text popup
|
|
<button type="button" class="tooltip-button text-primary-600" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="right">
|
|
<iconify-icon icon="jam:alert" class="text-primary-light text-lg mt-4"></iconify-icon>
|
|
</button>
|
|
<div class="my-tooltip tip-content hidden text-start shadow">
|
|
<h6 class="text-white">This is title</h6>
|
|
<p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection |