Skip to content

Commit 621c12d

Browse files
Add on hover tooltip for citation icons
1 parent 05c5043 commit 621c12d

File tree

1 file changed

+33
-5
lines changed

1 file changed

+33
-5
lines changed

_includes/citation/cite.qmd

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,35 @@
88
</ul>
99
</div>
1010
11+
<style>
12+
.citation-icon-btn[data-tooltip]:hover::after {
13+
content: attr(data-tooltip);
14+
position: absolute;
15+
bottom: 100%;
16+
left: 50%;
17+
transform: translateX(-50%);
18+
background-color: rgba(0, 0, 0, 0.7);
19+
color: #fff;
20+
padding: 5px 10px;
21+
border-radius: 5px;
22+
font-size: 12px;
23+
white-space: nowrap;
24+
z-index: 9999;
25+
opacity: 0;
26+
visibility: hidden;
27+
transition: opacity 0.2s, visibility 0.2s;
28+
}
29+
30+
.citation-icon-btn[data-tooltip]:hover::after {
31+
opacity: 1;
32+
visibility: visible;
33+
}
34+
35+
.citation-icon-btn {
36+
position: relative;
37+
}
38+
</style>
39+
1140
<script>
1241
// DATA: Add new BibTeX entries here
1342
const bibtexData = [
@@ -89,11 +118,10 @@ function generateCitationHTML(bibData) {
89118
</p>
90119
</div>
91120
<div class="citation-actions">
92-
<a href="${viewUrl}" target="_blank" rel="noopener noreferrer" class="citation-icon-btn" aria-label="View Paper: ${title}" title="View Paper">
93-
<!-- Bootstrap redirection icon -->
94-
<i class="bi bi-box-arrow-up-right"></i>
95-
</a>
96-
<button class="citation-icon-btn copy-bibtex-btn" aria-label="Copy BibTeX for ${title}" title="Copy BibTeX">
121+
<a href="${viewUrl}" target="_blank" rel="noopener noreferrer" class="citation-icon-btn" aria-label="View Paper: ${title}" title="View Paper" data-tooltip="View Paper">
122+
<i class="bi bi-box-arrow-up-right"></i>
123+
</a>
124+
<button class="citation-icon-btn copy-bibtex-btn" aria-label="Copy BibTeX for ${title}" title="Copy BibTeX" data-tooltip="Copy BibTeX">
97125
<!-- Custom SVG for citation icon -->
98126
<svg fill="currentColor" height="135px" width="135px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 191.029 191.029" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M44.33,88.474v15.377h38.417v82.745H0v-82.745h0.002V88.474c0-31.225,8.984-54.411,26.704-68.918 C38.964,9.521,54.48,4.433,72.824,4.433v44.326C62.866,48.759,44.33,48.759,44.33,88.474z M181.107,48.759V4.433 c-18.343,0-33.859,5.088-46.117,15.123c-17.72,14.507-26.705,37.694-26.705,68.918v15.377h0v82.745h82.744v-82.745h-38.417V88.474 C152.613,48.759,171.149,48.759,181.107,48.759z"></path> </g></svg>
99127
</button>

0 commit comments

Comments
 (0)