css 闪亮的工具提示

Posted 2021-05-13

# Write an string in ..., or write HTML wrapping in shiny::HTML
info_tip <- function(color = "#4682B4", ...){
  div(class = "tooltip2", HTML(sprintf("<i class='fa fa-info-circle' style='color:%s; font-size: 16px;'></i>", color)), 
      tags$span(class="tooltiptext", style = "font-size: 14px; font-weight: normal; line-height: 120%;", ...)
  )
}

.tooltip2 {
    position: relative;
    display: inline-block;
    margin-left: 3px;
}

.tooltip2 .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    top: 100%;
    left: 50%;
    margin-top: 10px;
    margin-left: -100px; /* Use half of the width (120/2 = 60), to center the tooltip2 */
    position: absolute;
    z-index: 100;
}
.tooltip2:hover .tooltiptext {
    visibility: visible;
}
.tooltip2 .tooltiptext {
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip2:hover .tooltiptext {
    opacity: 1;
}
.tooltip2 .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip2 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip2 img {
    border: 3px solid black;
    border-radius: 6px;
    margin-top: -5px;
    margin-bottom: -5px;
    margin-left: -5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    z-index: 100;

}