Bootstrap Snippet copy to clipboard items with tooltips using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container mt-5">
    <div class="row d-flex justify-content-center">
        <div class="col-md-6">
            <div class="card p-3 px-4">
                <div class="d-flex justify-content-between align-items-center mb-3"> <span class="text-line me-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span> <button onclick="copy('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod','#copy_button_1')" id="copy_button_1" class="btn btn-sm btn-success copy-button">Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3"> <span class="text-line me-2">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> <button onclick="copy('Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.','#copy_button_2')" id="copy_button_2" class="btn btn-sm btn-success copy-button">Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3"> <span class="text-line me-2">Duis aute irure dolor in reprehenderit in voluptate velit</span> <button onclick="copy('Duis aute irure dolor in reprehenderit in voluptate velit','#copy_button_3')" id="copy_button_3" class="btn btn-sm btn-success copy-button">Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3"> <span class="text-line me-2">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</span> <button onclick="copy('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.','#copy_button_4')" id="copy_button_4" class="btn btn-sm btn-success copy-button">Copy</button> </div>
                <div class="d-flex justify-content-between align-items-center mb-3"> <span class="text-line me-2">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> <button onclick="copy('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod','#copy_button_5')" id="copy_button_5" class="btn btn-sm btn-success copy-button">Copy</button> </div>
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background: #B9B4B4
}
.card {
    border: none;
    height: 100%
}
.copy-button {
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}
.tip {
    background-color: #263646;
    padding: 0 14px;
    line-height: 27px;
    position: absolute;
    border-radius: 4px;
    z-index: 100;
    color: #fff;
    font-size: 12px;
    animation-name: tip;
    animation-duration: .6s;
    animation-fill-mode: both
}
.tip:before {
    content: "";
    background-color: #263646;
    height: 10px;
    width: 10px;
    display: block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
function copy(text, target) {
setTimeout(function() {
$('#copied_tip').remove();
}, 800);
$(target).append("<div class='tip' id='copied_tip'>Copied!</div>");
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input)
return result;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"copy to clipboard items with tooltips "
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"copy to clipboard items with tooltips " Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"copy to clipboard items with tooltips "
Bootstrap 4.1.1 Snippet by tieusuquay79