xxxxxxxxxx
// to show default tooltip in html, add title attribute
<p title="This is a tooltip">Hover here</p>
xxxxxxxxxx
## DISPLAY TOOLTIP IF LINK IS HOVER
<a href="youtube link" title="My Youtube Channel">Youtube</a>
NOTE: CAN ALSO BE USED IN DIFFERENT HTML TAGS
xxxxxxxxxx
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
xxxxxxxxxx
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
data-bs-title="This top tooltip is themed via CSS variables.">
Custom tooltip
</button>
xxxxxxxxxx
repositories {
google()
mavenCentral()
maven { url 'https://jitpack.io' }
}
dependencies {
implementation 'com.github.MarcinKap:Compose_Animation_Tooltips_Library:1.0.0'
}