.Popover { position: absolute; right: 0; left: 0; z-index: 100; } .Popover-message { position: relative; max-width: 235px; margin-right: auto; margin-left: auto; // Carets &::before, &::after { position: absolute; left: 50%; display: inline-block; content: ""; } &::before { top: -16px; margin-left: -9px; border: 8px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.15); } &::after { top: -14px; margin-left: -8px; border: 7px solid transparent; border-bottom-color: $bg-white; } } .Popover-message--right { right: -9px; margin-right: 0; &::before, &::after { left: auto; margin-left: 0; } &::before { right: 20px; } &::after { right: 21px; } } .Popover-message--left { left: -9px; margin-left: 0; &::before, &::after { left: 20px; margin-left: 0; } &::after { left: 21px; } } .Popover-message--lg { max-width: 330px; }