.attributed { position: relative; } .attribution { display: flex; position: absolute; bottom: calc(100% + 0.2rem); left: 0; right: 0; z-index: 2; pointer-events: none; justify-content: center; user-select: none; } .attributionBubble { display: flex; flex-flow: column; opacity: 0; background-color: black; color: white; position: relative; margin-bottom: 0.5rem; font-size: 1rem; padding: 0.5rem; border-radius: 0.5rem; box-sizing: border-box; transform: scale(0); transform-origin: bottom center; transition: opacity 0.25s ease, transform 0.25s ease; transition-delay: 250ms; pointer-events: initial; user-select: none; } .attribution .attributionBubble * { user-select: none; } .attributionBubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -0.5rem; border-width: 0.5rem; border-style: solid; border-color: black transparent transparent transparent; } .attributed:hover, .attributed:focus-within { user-select: text; } .attributed:hover .attributionBubble, .attributed:focus-within .attributionBubble { opacity: 100%; transform: none; user-select: text; } .attributed:hover .attributionBubble *, .attributed:focus-within .attributionBubble * { user-select: text; }