Clipboard.vue

<template>
	<div class="clipboard input-group mb-3 mx-auto">
		<button
			id="btncopy"
			class="btn btn-info px-4 py-1"
			type="button"
			@click="copyText">
			<outline-clipboard-copy-icon class="icon" />
		</button>
		<input
			type="text"
			class="form-control text-truncate"
			:value="textContent"
			disabled />
	</div>
</template>

<script>
import Tooltip from "~/node_modules/bootstrap/js/dist/tooltip"

export default {
	props: {
		textContent: {
			type: String,
			required: true
		}
	},
	methods: {
		copyText() {
			navigator.clipboard.writeText(this.textContent)
			let btn = document.querySelector("#btncopy")
			let tooltip = new Tooltip(btn, {
				title: this.$t("copie") + " !",
				trigger: "manual"
			})

			tooltip.show()
			setTimeout(() => {
				tooltip.hide()
			}, 1000)
		}
	}
}
</script>

<style lang="scss">
.clipboard {
	max-width: 500px;
}
</style>