如何在 flexdashboard 导航栏图标中添加工具提示？

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:

<a href="#" class=".fa-question-circle" data-tooltip="My text is a text">Text</a>

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; }

 <a href="#" class="fa-question-circle" data-tooltip="My text is a text">Text</a>

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>