doc-fui-ds
Version:
Doc
69 lines (58 loc) • 3.18 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FUI Design System - Copy Tooltip Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body class="bg-dark text-light p-4">
<!-- Example Code Block 1 -->
<div class="position-relative mb-4">
<!-- Copy button with tooltip -->
<span onclick="copyCode('fui-btn-1', this)" class="position-absolute top-0 end-0 m-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard">
<i class="bi bi-clipboard fui-cursor-pointer"></i>
</span>
<pre class="bg-secondary p-3 rounded"><code id="fui-btn-1">console.log('FUI Button Code');</code></pre>
</div>
<!-- Example Code Block 2 -->
<div class="position-relative">
<!-- Copy button with tooltip -->
<span onclick="copyCode('fui-bootstrap-btn-1', this)" class="position-absolute top-0 end-0 m-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard">
<i class="bi bi-clipboard fui-cursor-pointer"></i>
</span>
<pre class="bg-secondary p-3 rounded"><code id="fui-bootstrap-btn-1">console.log('FUI Bootstrap Button Code'); <div>test</div></code></pre>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Initialize tooltips dynamically on page load
document.addEventListener("DOMContentLoaded", () => {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltipTriggerList.forEach((tooltipTriggerEl) => {
new bootstrap.Tooltip(tooltipTriggerEl);
});
});
// Function to copy code to clipboard and dynamically update tooltip
function copyCode(exampleId, btn) {
const codeElement = document.getElementById(exampleId);
const code = codeElement.textContent;
// Copy the code to clipboard
navigator.clipboard.writeText(code).then(() => {
// Update tooltip to "Copied!"
const tooltipInstance = bootstrap.Tooltip.getInstance(btn);
tooltipInstance.setContent({ '.tooltip-inner': 'Copied!' });
// Change the icon to indicate success
btn.innerHTML = '<i class="bi bi-clipboard-check fui-cursor-pointer"></i>';
// Reset the tooltip and icon after 2 seconds
setTimeout(() => {
tooltipInstance.setContent({ '.tooltip-inner': 'Copy to clipboard' });
btn.innerHTML = '<i class="bi bi-clipboard fui-cursor-pointer"></i>';
}, 2000);
});
}
</script>
</body>
</html>