Template:Hoverable badge/styles.css

.template-badge-hoverable {
    min-height: 32px;
    position: relative;
}

.template-badge-hoverable-details {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-width: 50vw;
    padding: 1rem;
    box-shadow: var(--tg-border-color-base) 0px 0px 0px 1px inset;
    border-radius: var(--tg-border-radius-small);
    background: var(--tg-color-surface-1);
    color: var(--tg-color-base);
    font-size: var(--tg-font-size-small);
    line-height: var(--tg-line-height);
    opacity: 0;
    pointer-events: none;
    width: 480px;
    max-width: 50vw;
}

.template-badge-hoverable:hover > .template-badge-hoverable-details {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.template-badge-hoverable-details blockquote {
    margin: 0;
}