.rn-info-badge{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:14px;
  line-height:1;
  padding:6px 9px;
  border-radius:999px;
  z-index:9999;
  cursor:pointer;
  transition:background .2s ease;
}

.rn-info-badge:hover{
  background:rgba(0,0,0,.75);
}

.rn-info-badge .rn-info-card{
  position:absolute;
  right:0;
  top:100%;
  margin-top:6px;
  background:#111;
  color:#fff;
  font-size:12px;
  padding:8px 12px;
  border-radius:6px;
  white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:all .18s cubic-bezier(0.32, 0.74, 0.57, 1);
}

.rn-info-badge:hover .rn-info-card,
.rn-info-badge.rn-open .rn-info-card{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media (hover:none){
  .rn-info-badge .rn-info-card{
    white-space:normal;
    max-width:80vw;
  }
}