How add tooltip in flexdashboard navbar icon? - html

Question

I have this application in R.
How add tooltip when I hover over the icon? Like this:
The icon class is .fa-question-circle. I tried:
HTML:
Text
CSS:
.fa-question-circle
{
position:relative;
}
.fa-question-circle:after
{
background-color:rgba(0, 0, 0, .6);
color: white;
box-sizing:border-box;
content: attr(data-tooltip);
display:none;
padding:5px;
position:absolute;
right: -105px;
bottom: -55px;
z-index:3;
box-shadow: 0 0 3px #000;
border-radius: 0px 10px 10px 10px;
}
.fa-question-circle:hover:after {
display:block;
}
But doesn't work. Thanks.

Answer 1

I found the wrong part. you need use class="fa-question-circle" not class=".fa-question-circle"
.fa-question-circle
{
position:relative;
}
.fa-question-circle:after
{
background-color:rgba(0, 0, 0, .6);
color: white;
box-sizing:border-box;
content: attr(data-tooltip);
display:none;
padding:5px;
position:absolute;
right: -105px;
bottom: -55px;
z-index:3;
box-shadow: 0 0 3px #000;
border-radius: 0px 10px 10px 10px;
}
.fa-question-circle:hover:after {
display:block;
}
Text

Answer 2

You can try something like this and remove . from the class name in your anchor tag.
.fa-question-circle {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.fa-question-circle .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;
}
.fa-question-circle:hover .tooltiptext {
visibility: visible;
}
<a href="#" class="fa-question-circle">Text
<span class="tooltiptext">My text is a text</span>
</a>