<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-popovers.html.twig */
class __TwigTemplate_46af5fb91c3c3d73c3a2a0359fd2b5e2 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'css' => [$this, 'block_css'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-popovers.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-popovers.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-popovers.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Popovers
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_css($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 8
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 9
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Popovers"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 12
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 13
        echo "\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Simple Popover</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tPopover is a component which displays a box with a content after a click on an
\t\t\t\t\t\t                                            element - similar to the tooltip but can contain more content.
\t\t\t\t\t</p>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"popover\" title=\"Popover title\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\">Click to toggle
\t\t\t\t\t\t                                                    popover</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Dismiss on Next Click</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the
\t\t\t\t\t\t<code>focus</code>
\t\t\t\t\t\ttrigger to dismiss popovers
\t\t\t\t\t\t                                            on the user’s next click of a different element than the toggle element.</p>

\t\t\t\t\t<button type=\"button\" tabindex=\"0\" class=\"btn btn-success\" data-bs-toggle=\"popover\" data-bs-trigger=\"focus\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\" title=\"Dismissible popover\">
\t\t\t\t\t\tDismissible popover
\t\t\t\t\t</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Hover</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the attribute
\t\t\t\t\t\t<code>data-bs-trigger=\"hover\"</code>
\t\t\t\t\t\tto show the popover on hovering the element.</p>

\t\t\t\t\t<button type=\"button\" tabindex=\"0\" class=\"btn btn-dark\" data-bs-toggle=\"popover\" data-bs-trigger=\"hover\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\" title=\"Ohh Wow !\">
\t\t\t\t\t\tPlease Hover Me
\t\t\t\t\t</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Four Directions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Four options are available: top, right, bottom, and
\t\t\t\t\t\t                                            left aligned.</p>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"top\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"\">
\t\t\t\t\t\tPopover on top
\t\t\t\t\t</button>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"bottom\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"\">
\t\t\t\t\t\tPopover on bottom
\t\t\t\t\t</button>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"\">
\t\t\t\t\t\tPopover on right
\t\t\t\t\t</button>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"left\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"Popover title\">
\t\t\t\t\t\tPopover on left
\t\t\t\t\t</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Custom Popovers
\t\t\t\t\t</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can customize the appearance of popovers using CSS variables. We set a custom class with
\t\t\t\t\t\t<code>data-bs-custom-class=\"primary-popover\"</code>
\t\t\t\t\t\tto scope our custom appearance and use it to override some of the
\t\t\t\t\t\t                                            local CSS variables.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"primary-popover\" data-bs-title=\"Primary popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tPrimary popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"success-popover\" data-bs-title=\"Success popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tSuccess popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"danger-popover\" data-bs-title=\"Danger popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tDanger popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"info-popover\" data-bs-title=\"Info popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tInfo popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"pink-popover\" data-bs-title=\"Pink popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tPink popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple\" data-bs-toggle=\"popover\" data-bs-placement=\"left\" data-bs-custom-class=\"purple-popover\" data-bs-title=\"Purple popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tPurple popover
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Disabled Elements</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Elements with the
\t\t\t\t\t\t<code>disabled</code>
\t\t\t\t\t\tattribute
\t\t\t\t\t\t                                            aren’t interactive, meaning users cannot hover or click them to trigger a
\t\t\t\t\t\t                                            popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
\t\t\t\t\t\t                                            wrapper
\t\t\t\t\t\t<code>&lt;div&gt;</code>
\t\t\t\t\t\tor
\t\t\t\t\t\t<code>&lt;span&gt;</code>
\t\t\t\t\t\tand override the
\t\t\t\t\t\t<code>pointer-events</code>
\t\t\t\t\t\ton the disabled element.</p>

\t\t\t\t\t<span class=\"d-inline-block\" data-bs-toggle=\"popover\" data-bs-content=\"Disabled popover\">
\t\t\t\t\t\t<button class=\"btn btn-primary\" style=\"pointer-events: none;\" type=\"button\" disabled>Disabled button</button>
\t\t\t\t\t</span>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-popovers.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  132 => 13,  122 => 12,  109 => 9,  99 => 8,  81 => 6,  61 => 3,  38 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Popovers
{% endblock %}

{% block css %}{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Popovers' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Simple Popover</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tPopover is a component which displays a box with a content after a click on an
\t\t\t\t\t\t                                            element - similar to the tooltip but can contain more content.
\t\t\t\t\t</p>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"popover\" title=\"Popover title\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\">Click to toggle
\t\t\t\t\t\t                                                    popover</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Dismiss on Next Click</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the
\t\t\t\t\t\t<code>focus</code>
\t\t\t\t\t\ttrigger to dismiss popovers
\t\t\t\t\t\t                                            on the user’s next click of a different element than the toggle element.</p>

\t\t\t\t\t<button type=\"button\" tabindex=\"0\" class=\"btn btn-success\" data-bs-toggle=\"popover\" data-bs-trigger=\"focus\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\" title=\"Dismissible popover\">
\t\t\t\t\t\tDismissible popover
\t\t\t\t\t</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Hover</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the attribute
\t\t\t\t\t\t<code>data-bs-trigger=\"hover\"</code>
\t\t\t\t\t\tto show the popover on hovering the element.</p>

\t\t\t\t\t<button type=\"button\" tabindex=\"0\" class=\"btn btn-dark\" data-bs-toggle=\"popover\" data-bs-trigger=\"hover\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\" title=\"Ohh Wow !\">
\t\t\t\t\t\tPlease Hover Me
\t\t\t\t\t</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Four Directions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Four options are available: top, right, bottom, and
\t\t\t\t\t\t                                            left aligned.</p>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"top\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"\">
\t\t\t\t\t\tPopover on top
\t\t\t\t\t</button>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"bottom\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"\">
\t\t\t\t\t\tPopover on bottom
\t\t\t\t\t</button>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"\">
\t\t\t\t\t\tPopover on right
\t\t\t\t\t</button>

\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"left\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" title=\"Popover title\">
\t\t\t\t\t\tPopover on left
\t\t\t\t\t</button>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Custom Popovers
\t\t\t\t\t</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can customize the appearance of popovers using CSS variables. We set a custom class with
\t\t\t\t\t\t<code>data-bs-custom-class=\"primary-popover\"</code>
\t\t\t\t\t\tto scope our custom appearance and use it to override some of the
\t\t\t\t\t\t                                            local CSS variables.</p>

\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"primary-popover\" data-bs-title=\"Primary popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tPrimary popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-success\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"success-popover\" data-bs-title=\"Success popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tSuccess popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-danger\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"danger-popover\" data-bs-title=\"Danger popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tDanger popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-info\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"info-popover\" data-bs-title=\"Info popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tInfo popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-pink\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-custom-class=\"pink-popover\" data-bs-title=\"Pink popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tPink popover
\t\t\t\t\t\t</button>

\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-purple\" data-bs-toggle=\"popover\" data-bs-placement=\"left\" data-bs-custom-class=\"purple-popover\" data-bs-title=\"Purple popover\" data-bs-content=\"This popover is themed via CSS variables.\">
\t\t\t\t\t\t\tPurple popover
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Disabled Elements</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Elements with the
\t\t\t\t\t\t<code>disabled</code>
\t\t\t\t\t\tattribute
\t\t\t\t\t\t                                            aren’t interactive, meaning users cannot hover or click them to trigger a
\t\t\t\t\t\t                                            popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
\t\t\t\t\t\t                                            wrapper
\t\t\t\t\t\t<code>&lt;div&gt;</code>
\t\t\t\t\t\tor
\t\t\t\t\t\t<code>&lt;span&gt;</code>
\t\t\t\t\t\tand override the
\t\t\t\t\t\t<code>pointer-events</code>
\t\t\t\t\t\ton the disabled element.</p>

\t\t\t\t\t<span class=\"d-inline-block\" data-bs-toggle=\"popover\" data-bs-content=\"Disabled popover\">
\t\t\t\t\t\t<button class=\"btn btn-primary\" style=\"pointer-events: none;\" type=\"button\" disabled>Disabled button</button>
\t\t\t\t\t</span>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

{% endblock %}", "ui-popovers.html.twig", "C:\\Users\\4\\Desktop\\Anant\\jidox\\jidox_symfony\\Jidox\\templates\\ui-popovers.html.twig");
    }
}
