.tooltip {
    background-color: #222;
    color: #fff;
    display: flex;
    position: absolute;
    max-width: 200px;
    border-radius: 3px;
    padding: 7px 10px;
    z-index: 99999;
}

.tooltip:after {
    content: '';
    width: 100%;
    height: 12px;
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    display: block;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16.971" height="16.971" viewBox="0 0 16.971 16.971">  <rect id="Rectangle_1334" data-name="Rectangle 1334" width="12" height="12" rx="2" transform="translate(0 8.485) rotate(-45)" fill="%23222"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.tooltip.left:after {
    top: 0;
    left: calc(100% - 6px);
    width: 12px;
    height: 100%;
}

.product-customisable .flex-control-nav li img.flex-active {
    pointer-events: none;
}