smb file fullpath clipboardcopy

src/main/webapp/WEB-INF/view/searchResults.jsp

@@ -39,13 +39,15 @@
 	<ol class="list-unstyled col-md-8">
 		<c:forEach var="doc" varStatus="s" items="${documentItems}">
 			<li id="result${s.index}">
-				<h3 class="title text-truncate" style="margin-bottom:0;">
-					<a class="link" href="${doc.url_link}" data-uri="${doc.url_link}"
-						data-id="${doc.doc_id}" data-order="${s.index}">${doc.content_title}</a>
-				</h3>
-				<c:if test="${ fn:substring(doc.url,0,4)=='smb:' }">					
-					<i id="tooltip${s.index}" class="clipboard-copy-button fa fa-copy" aria-hidden="true" data-clipboard-text="${doc.url_link}"></i>
-				</c:if>	
+				<div class="title-container">
+					<h3 class="title text-truncate" style="margin-bottom:0;">
+						<a class="link" href="${doc.url_link}" data-uri="${doc.url_link}"
+							data-id="${doc.doc_id}" data-order="${s.index}">${doc.content_title}</a>
+					</h3>
+					<c:if test="${ fn:substring(doc.url,0,4)=='smb:' }">					
+						<i class="clipboard-copy fa fa-copy" data-clipboard-text="${doc.url_link}"></i>
+					</c:if>	
+				</div>
 				<div class="body">
 					<c:if test="${thumbnailSupport && !empty doc.thumbnail}">
 					<div class="mr-3">
@@ -231,13 +233,17 @@
 		</ul>
 	</nav>
 	<script>
-		const clipboard = new ClipboardJS('.clipboard-copy-button');
+		const clipboard = new ClipboardJS('.clipboard-copy');
 		clipboard.on('success', function(e) {
+			e.trigger.classList.remove('clipboard-copy');
+			e.trigger.classList.add('clipboard-copy-');
 			e.trigger.classList.add('clipboard-copy-copied');
 			setTimeout(()=>{
 				e.trigger.classList.remove('clipboard-copy-copied');
+				e.trigger.classList.remove('clipboard-copy-');
+				e.trigger.classList.add('clipboard-copy');
 			},1200);
 			e.clearSelection();
 		});
 	</script>
-</div>
+</div>

src/main/webapp/css/style.css

@@ -196,3 +196,43 @@ legend{
 .clipboard-copy-copied::after {
 	 opacity: 1;
 }
+.title-container{
+	display: flex;
+	align-items: center;
+}
+.clipboard-copy, .clipboard-copy- {
+	margin-left: 5px;
+	cursor: pointer;
+	color:gray;
+	position: relative;
+}
+.clipboard-copy::after, .clipboard-copy-::after{
+	opacity: 0;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: -30px;
+	display: inline-block;
+	padding: 5px;
+	white-space: nowrap;
+	font-size: 0.8rem;
+	line-height: 1.3;
+	background:black;
+	color:white;
+	border-radius: 3px;
+	transition: 0.3s ease-in;
+}
+.clipboard-copy:hover:after{
+	content:'smb full path copy';
+	opacity: 1;
+}
+.clipboard-copy:hover:before{
+	opacity: 1;
+}
+.clipboard-copy-copied::after{
+	content: 'copied!';
+	opacity: 1;
+}
+.clipboard-copy-copied::before{
+	opacity: 1;
+}