https://devcodepro.comdevcodepro

Change Tooltip Background Color Bootstrap 5

.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;
}

rated 1 times (1) (0)

comments: 1 / hits: 47 / 2 weeks ago, sat, jan 8, 22, 03:17:26

Comments

Change width

Code:

.tooltip-inner {
    min-width:350px;
}

[#60] Saturday, January 8, 2022, 3:33:38

commented 2 weeks ago

James Bo

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

Posted

James Bo

Member since Aug 8, 2019

Total Points: 322

Total Code Snippets: 10

Total Comments: 3

Location: n/a

James Bo snippets

Bootstrap Blockquote Style

2 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: 963

CSS

White list IP CSF ConfigServer

5 months 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: 88

Plain Text

Masonry Layout Using Only CSS

3 months 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: 129

CSS

Auto go back to previous page

3 months ago, tue, oct 19, 21, 5:12:00

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

comments: 0 / hits: 62

JavaScript

CSS only first letter capital

3 months 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: 64

CSS

pdf.js Fixed Width

1 month 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: 65

JavaScript

Get value from var_dump as variable

4 weeks 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: 51

PHP

Bootstrap 5 popover close on click outside

2 weeks ago, sat, jan 8, 22, 4:55:29

<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>

comments: 0 / hits: 26

HTML, XML

Cache-control max-age example - htaccess

2 weeks 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: 35

Apache