Bootstrap 5 copy to clipboard objects with tooltips – csshint

On this article we’re going to study The right way to create copy to clipboard objects with tooltips utilizing bootstrap. Designed by bbbootstrap.

HTML

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

CSS

physique{
    background: #B9B4B4
}
.card{
    border: none;
    top: 100%
}
.copy-button{
    top: 25px;
    show: flex;
    justify-content: middle;
    align-items: middle;
    place: relative
}
.tip{
    background-color: #263646;
    padding: 0 14px;
    line-height: 27px;
    place: absolute;
    border-radius: 4px;
    z-index: 100;
    shade: #fff;
    font-size: 12px;
    animation-name: tip;
    animation-duration: .6s;
    animation-fill-mode: each
}
.tip:earlier than{
    content material: "";
    background-color: #263646;
    top: 10px;
    width: 10px;
    show: block;
    place: absolute;
    rework: rotate(45deg);
    prime: -4px;
    left: 17px
}
#copied_tip{
    animation-name: come_and_leave;
    animation-duration: 1s;
    animation-fill-mode: each;
    backside: -35px;
    left:2px
}
.text-line{
    font-size: 14px
}

JAVASCRIPT

perform copy(textual content, goal) {
setTimeout(perform() {
$('#copied_tip').take away();
}, 800);
$(goal).append("<div class="tip" id='copied_tip'>Copied!</div>");
var enter = doc.createElement('enter');
enter.setAttribute('worth', textual content);
doc.physique.appendChild(enter);
enter.choose();
var end result = doc.execCommand('copy');
doc.physique.removeChild(enter)
return end result;
}

RESOURCES

https://cdn.jsdelivr.internet/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css

https://cdn.jsdelivr.internet/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js