{"id":1489,"date":"2022-05-14T15:40:56","date_gmt":"2022-05-14T12:40:56","guid":{"rendered":"http:\/\/leonidassavvides.com\/blog\/?p=1489"},"modified":"2022-05-14T15:40:56","modified_gmt":"2022-05-14T12:40:56","slug":"bootstrap-5-x-pop-overs-as-fast-as-3-steps","status":"publish","type":"post","link":"https:\/\/www.leonidassavvides.com\/blog\/2022\/05\/bootstrap-5-x-pop-overs-as-fast-as-3-steps\/","title":{"rendered":"Bootstrap 5.x Pop-overs As Fast As 3-Steps"},"content":{"rendered":"
<\/div>\n

<\/p>\n\n\n\n

Official Docs<\/strong> located here: <\/h3>\n\n\n\n

https:\/\/getbootstrap.com\/docs\/5.1\/components\/popovers\/<\/a><\/p>\n\n\n\n

Production Example here:<\/h3>\n\n\n\n

http:\/\/michaeleliasphotovoltaicsystems.com\/products.php<\/a><\/p>\n\n\n\n

STEP-1 [in the place of Popovers – HTML5]:<\/h3>\n\n\n\n
                    <div class=\"justify-content-md-center\">\n                        <h1 class=\"text-center spacer_bottom\">LUXOR SOLAR - Solar Panels<\/h1>\n\n                        <div class=\"row justify-content-md-center\">\n                            <div class=\"col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12\">\n                                <button id=\"myPopover1\" type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"top\" >\n                                    <img style=\"max-height: 1000px; height: 100%;\" class=\"img-fluid\" src=\"https:\/\/clients2021.s3.eu-central-1.amazonaws.com\/Solar\/assets\/images\/JPGs\/Solar-Panels\/Solar-Panel_LUXOR_Eco_Line_HC_M120_FB_365-385W_166cs-1.jpg\" alt=\"Solar-Panel_LUXOR_Eco_Line_HC_M120_FB_365-385W_166cs\" \/>\n                                <\/button>\n                            <\/div>\n                            <div class=\"col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12\">\n                                <button id=\"myPopover2\" type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"top\" >\n                                    <img style=\"max-height: 1000px; height: 100%;\" class=\"img-fluid\" src=\"https:\/\/clients2021.s3.eu-central-1.amazonaws.com\/Solar\/assets\/images\/JPGs\/Solar-Panels\/Luxor-Solar-Panel-Warramty-LX-PWEX-15plus-EN-1.jpg\" alt=\"Luxor-Solar-Panel-Warramty-LX-PWEX-15plus years\" \/>\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div><\/pre>\n\n\n\n
STEP-2 [Bottom, Below The Footer]:<\/h3>\n\n\n\n
<!--===== script start =====-->\n<script src=\"assets\/js\/jquery.min.js\"><\/script>\n<script src=\"assets\/js\/popper.min.js\"><\/script>\n<script src=\"assets\/js\/bootstrap.min.js\"><\/script><\/pre>\n\n\n\n
STEP-3 [Bottom, Below\/After Step-2]:<\/h3>\n\n\n\n
<script>\n\n    $(document).ready(function(){\n\n        $(\"#myPopover1\").popover({\n            title: '<h6 class=\"custom-title\"><i class=\"bi-info-circle-fill\"><\/i> LUXOR SOLAR More info<\/h6>',\n            content: '<div><a target=\"_blank\" href=\"\/LX_EL_HC_M120_340-360W_1684x1002x35_SF_158cs_en_low.pdf\">Link Doc PDF<\/a> &nbsp; - &nbsp; <a target=\"_blank\" href=\"https:\/\/www.luxor.solar\/en\/index-en.html\">Luxor Web-Site<\/a><\/div>',\n            html: true\n        });\n\n        $(\"#myPopover2\").popover({\n            title: '<h6 class=\"custom-title\"><i class=\"bi-info-circle-fill\"><\/i> LUXOR SOLAR More info<\/h6>',\n            content: '<div><a target=\"_blank\" href=\"\/LX-PWEX-15plus-EN.pdf\">Link Doc PDF<\/a> &nbsp; - &nbsp; <a target=\"_blank\" href=\"https:\/\/www.luxor.solar\/en\/index-en.html\">Luxor Web-Site<\/a><\/div>',\n            html: true\n        });\n   });\n\n<\/script><\/pre>\n\n\n\n
<\/p>\n\n\n\n
That’s it…!!!<\/strong><\/h4>\n\n\n\n
<\/p>\n\n\n\n
========================<\/p>\n","protected":false},"excerpt":{"rendered":"
Official Docs located here: https:\/\/getbootstrap.com\/docs\/5.1\/components\/popovers\/ Production Example here: http:\/\/michaeleliasphotovoltaicsystems.com\/products.php STEP-1 [in the place of Popovers – HTML5]: STEP-2 [Bottom, Below The Footer]: STEP-3 [Bottom, Below\/After Step-2]: That’s it…!!! ========================<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,12,32,42,43],"tags":[71,72,75,78,136,137,195,196],"class_list":["post-1489","post","type-post","status-publish","format-standard","hentry","category-dev","category-internet","category-php","category-technical","category-tech","tag-bootstrap","tag-bootstrap-5","tag-bootstrap-5-popovers","tag-bootstrap-popovers","tag-html5-popover","tag-html5-popovers","tag-popover","tag-popovers"],"_links":{"self":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/1489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/comments?post=1489"}],"version-history":[{"count":0,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/categories?post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leonidassavvides.com\/blog\/wp-json\/wp\/v2\/tags?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}