/* Container */
.kb-htip-wrap{
  position: relative;
  display: inline-block;
  cursor: help;
  --kb-htip-width: 320px;
}

/* The floating preview */
.kb-htip-img{
  display: none;
  position: absolute;
  z-index: 99999;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  border-radius: 10px;
  padding: 6px;
  max-width: var(--kb-htip-width);
  max-height: 60vh;
  overflow: hidden;
}

/* Placement */
.kb-htip--right .kb-htip-img{ left: 100%; top: 0; margin-left: .5rem; }
.kb-htip--left  .kb-htip-img{ right: 100%; top: 0; margin-right: .5rem; }
.kb-htip--top   .kb-htip-img{ left: 0; bottom: 100%; margin-bottom: .5rem; }
.kb-htip--bottom .kb-htip-img{ left: 0; top: 100%; margin-top: .5rem; }

.kb-htip-img img{ max-width: 100%; height: auto; display: block; }

/* Show on hover/focus */
.kb-htip-wrap:hover .kb-htip-img,
.kb-htip-wrap:focus-within .kb-htip-img{ display: block; }

/* Optional: make the text look like a cue */
.kb-htip-text{
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}