Popper.css

btpopper.css

/* 8,9 */
.btpopper {
    border: 1px solid #8baef5;
}

.btpopper .popper__arrow::after {
    content: " ";
}
.btpopper .popper__arrow,.btpopper .popper__arrow::after {
    border-width: 0 .5rem .5rem .5rem;
}

.btpopper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -8px;
    border-top-width: 0;
    border-bottom-color: #FFF;
}
.btpopper[x-placement^=bottom] .popper__arrow {
    top: -9px;
    border-top-width: 0;
    border-bottom-color: #8baef5;
}
.btpopper[x-placement^=bottom] {
    margin-top: 8px;
}

.btpopper[x-placement^=top] .popper__arrow::after {
    bottom: 1px;
    margin-left: -8px;
    border-bottom-width: 0;
    border-top-color: #FFF;
}
.btpopper[x-placement^=top] .popper__arrow {
    bottom: -9px;
    border-bottom-width: 0;
    border-top-color: #8baef5;
}
.btpopper[x-placement^=top] {
    margin-bottom: 8px;
}

.btpopper[x-placement^=left] .popper__arrow::after {
    right: 1px;
    bottom:-8px;
    border-right-width: 0;
    border-left-color: #FFF;
}
.btpopper[x-placement^=left] .popper__arrow {
    right: -9px;
    border-right-width: 0;
    border-left-color: #8baef5;
}
.btpopper[x-placement^=left] {
    margin-right: 8px;
}
.btpopper[x-placement^=right] .popper__arrow::after {
    left: 1px;
    bottom:-8px;
    border-left-width: 0;
    border-right-color: #FFF;
}
.btpopper[x-placement^=right] .popper__arrow {
    left: -9px;
    border-left-width: 0;
    border-right-color: #8baef5;
}
.btpopper[x-placement^=right] {
    margin-left: 8px;
}

effects.css

.fade {
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 1;
}

lgpopper.css

/* 10,11 */
.lgpopper {
    border: 1px solid #8baef5;
}

.lgpopper .popper__arrow::after {
    content: " ";
    border-width: 10px;
}
.lgpopper .popper__arrow {
    border-width: 11px;
}

.lgpopper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #FFF;
}
.lgpopper[x-placement^=bottom] .popper__arrow {
    top: -11px;
    border-top-width: 0;
    border-bottom-color: #8baef5;
}
.lgpopper[x-placement^=bottom] {
    margin-top: 10px;
}

.lgpopper[x-placement^=top] .popper__arrow::after {
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #FFF;
}
.lgpopper[x-placement^=top] .popper__arrow {
    bottom: -11px;
    border-bottom-width: 0;
    border-top-color: #8baef5;
}
.lgpopper[x-placement^=top] {
    margin-bottom: 10px;
}

.lgpopper[x-placement^=left] .popper__arrow::after {
    right: 1px;
    bottom:-10px;
    border-right-width: 0;
    border-left-color: #FFF;
}
.lgpopper[x-placement^=left] .popper__arrow {
    right: -11px;
    border-right-width: 0;
    border-left-color: #8baef5;
}
.lgpopper[x-placement^=left] {
    margin-right: 10px;
}
.lgpopper[x-placement^=right] .popper__arrow::after {
    left: 1px;
    bottom:-10px;
    border-left-width: 0;
    border-right-color: #FFF;
}
.lgpopper[x-placement^=right] .popper__arrow {
    left: -11px;
    border-left-width: 0;
    border-right-color: #8baef5;
}
.lgpopper[x-placement^=right] {
    margin-left: 10px;
}

mdpopper.css

/* 7,8 */
.mdpopper {
    border: 1px solid #8baef5;
}

.mdpopper .popper__arrow::after {
    content: " ";
    border-width: 7px;
}
.mdpopper .popper__arrow {
    border-width: 8px;
}

.mdpopper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -7px;
    border-top-width: 0;
    border-bottom-color: #FFF;
}
.mdpopper[x-placement^=bottom] .popper__arrow {
    top: -8px;
    border-top-width: 0;
    border-bottom-color: #8baef5;
}
.mdpopper[x-placement^=bottom] {
    margin-top: 7px;
}

.mdpopper[x-placement^=top] .popper__arrow::after {
    bottom: 1px;
    margin-left: -7px;
    border-bottom-width: 0;
    border-top-color: #FFF;
}
.mdpopper[x-placement^=top] .popper__arrow {
    bottom: -8px;
    border-bottom-width: 0;
    border-top-color: #8baef5;
}
.mdpopper[x-placement^=top] {
    margin-bottom: 7px;
}

.mdpopper[x-placement^=left] .popper__arrow::after {
    right: 1px;
    bottom:-7px;
    border-right-width: 0;
    border-left-color: #FFF;
}
.mdpopper[x-placement^=left] .popper__arrow {
    right: -8px;
    border-right-width: 0;
    border-left-color: #8baef5;
}
.mdpopper[x-placement^=left] {
    margin-right: 7px;
}
.mdpopper[x-placement^=right] .popper__arrow::after {
    left: 1px;
    bottom:-7px;
    border-left-width: 0;
    border-right-color: #FFF;
}
.mdpopper[x-placement^=right] .popper__arrow {
    left: -8px;
    border-left-width: 0;
    border-right-color: #8baef5;
}
.mdpopper[x-placement^=right] {
    margin-left: 7px;
}

xspopper.css

/* 5,6 */
.xspopper {
    border: 1px solid #8baef5;
}

.xspopper .popper__arrow::after {
    content: " ";
    border-width: 5px;
}
.xspopper .popper__arrow {
    border-width: 6px;
}

.xspopper[x-placement^=bottom] .popper__arrow::after {
    top: 1px;
    margin-left: -5px;
    border-top-width: 0;
    border-bottom-color: #FFF;
}
.xspopper[x-placement^=bottom] .popper__arrow {
    top: -6px;
    border-top-width: 0;
    border-bottom-color: #8baef5;
}
.xspopper[x-placement^=bottom] {
    margin-top: 5px;
}

.xspopper[x-placement^=top] .popper__arrow::after {
    bottom: 1px;
    margin-left: -5px;
    border-bottom-width: 0;
    border-top-color: #FFF;
}
.xspopper[x-placement^=top] .popper__arrow {
    bottom: -6px;
    border-bottom-width: 0;
    border-top-color: #8baef5;
}
.xspopper[x-placement^=top] {
    margin-bottom: 5px;
}

.xspopper[x-placement^=left] .popper__arrow::after {
    right: 1px;
    bottom:-5px;
    border-right-width: 0;
    border-left-color: #FFF;
}
.xspopper[x-placement^=left] .popper__arrow {
    right: -6px;
    border-right-width: 0;
    border-left-color: #8baef5;
}
.xspopper[x-placement^=left] {
    margin-right: 5px;
}
.xspopper[x-placement^=right] .popper__arrow::after {
    left: 1px;
    bottom:-5px;
    border-left-width: 0;
    border-right-color: #FFF;
}
.xspopper[x-placement^=right] .popper__arrow {
    left: -6px;
    border-left-width: 0;
    border-right-color: #8baef5;
}
.xspopper[x-placement^=right] {
    margin-left: 5px;
}