https://devcodepro.comdevcodepro

Bootstrap 5 popover close on click outside

<button tabindex="0" class="btn" data-bs-toggle="popover" data-bs-trigger="focus" title="My Title" data-bs-content="My Content">Preview</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

AD · www.interserver.net/r/240055

Interserver | Standard & VPS Cloud Hosting | $2.50 /Month

Flexible VPS hosting platform to deploy your online projects. Economical and balanced between processor cores, memory and storage

rated 1 times (1) (0)

comments: 0 / hits: 600 / 1 year ago, sat, jan 8, 22, 04:55:29

Comments

There are no comments for this Snippet yet

Only authorized users can post. Please sign in first, or register a free account

Posted

James Bo

Member since Aug 8, 2019

Total Points: 497

Total Code Snippets: 17

Total Comments: 3

Location: n/a

James Bo snippets

Bootstrap Blockquote Style

4 years ago, wed, oct 2, 19, 5:26:51

blockquote { width: 98%; overflow: hidden; display: block; border-left: 5px solid #b9c5ca; background-color: #e4ecef; color: #6b6868; padding: 24px; margin: 22px; font-style: oblique; }

comments: 0 / hits: 1241

CSS

White list IP CSF ConfigServer

2 years ago, fri, sep 10, 21, 4:02:32

<table> <tr> <td>1.</td><td>In csf.conf replace</td><td>IGNORE_ALLOW = "0"</td><td>to IGNORE_ALLOW = "1"</td> </tr><tr> <td>2.</td><td>In csf.ignore</td><td>After this line 127.0.0.1</td><td>Add this line 11.11.11.11</td> </tr><tr> <td>3.</td><td>Restart CSF via SSH</td><td>csf -r</td><td></td> </tr> </table>

comments: 0 / hits: 303

Plain Text

Masonry Layout Using Only CSS

2 years ago, tue, oct 19, 21, 9:00:53

.grid { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .griditem { display: inline-block; width: 100%; margin-bottom: 12px; } @media screen and (max-width: 768px) { .grid { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }

comments: 0 / hits: 426

CSS

Auto go back to previous page

2 years ago, tue, oct 19, 21, 5:12:00

function historygoback() { window.history.back(); } historygoback();

comments: 0 / hits: 286

JavaScript

CSS only first letter capital

2 years ago, fri, oct 22, 21, 3:27:27

.mydiv::first-letter { text-transform: uppercase; } .mydiv::first-letter { text-transform: uppercase; color: #bb0000; } .mydiv::first-letter { text-transform: uppercase; color: #bb0000; font-weight: 800; }

comments: 0 / hits: 261

CSS

pdf.js Fixed Width

1 year ago, mon, dec 27, 21, 5:45:13

const url = 'my.pdf'; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js'; const loadingTask = pdfjsLib.getDocument(url); (async () => { const pdf = await loadingTask.promise; const page = await pdf.getPage(1); const outputScale = window.devicePixelRatio || 1; const canvas = document.getElementById("the-canvas"); const context = canvas.getContext("2d"); var desiredWidth = 380; var viewport = page.getViewport({ scale: 1, }); var scale = desiredWidth / viewport.width; var scaledViewport = page.getViewport({ scale: scale, }); canvas.width = Math.floor(viewport.width * scale); canvas.height = Math.floor(viewport.height * scale); const renderContext = { canvasContext: context, viewport, }; page.render(renderContext); })();

comments: 0 / hits: 1283

JavaScript

Get value from var_dump as variable

1 year ago, tue, dec 28, 21, 5:44:56

$varexport = var_export($_FILES, true); $varexport = var_export($_POST, true); $varexport = var_export($_GET, true);

comments: 0 / hits: 301

PHP

Change Tooltip Background Color Bootstrap 5

1 year ago, sat, jan 8, 22, 3:17:26

.tooltip { font-family: Sora, sans-serif; font-weight: 300; line-height: 1.4; font-size: 0.8rem; } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { border-top-color: #46729d; } .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { border-right-color: #46729d; } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: #46729d; } .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { border-left-color: #46729d; } .tooltip-inner { color: #fff; background-color: #46729d; }

comments: 1 / hits: 1654

CSS

Cache-control max-age example - htaccess

1 year ago, mon, jan 10, 22, 1:57:04

<filesMatch ".(ico|pdf|flv|woff|woff2|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=31536000, public" </filesMatch>

comments: 0 / hits: 263

Apache