.bubble {
    display: none;
    position: absolute;
    background: #fff;
    border-radius: 4px;
    border: 1px #cccccc solid;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
    color: #000;
    padding: 10px;
    z-index: 50;
    min-width: 120px;
}

.bubble-center-top:after {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRlZnM+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxmaWx0ZXIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgeT0iMCIgeD0iMCIgaWQ9ImJ1YmJsZVNoYWRvdyI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZmVPZmZzZXQgZHk9Ii03IiBkeD0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9Im9mZk91dCIgLz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjUiIGluPSJvZmZPdXQiIHJlc3VsdD0iYmx1ck91dCIgLz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJibHVyT3V0IiBpbj0iU291cmNlR3JhcGhpYyIgLz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9maWx0ZXI+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9kZWZzPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMCwwIDI0LDAgMTIsMTQiIGZpbGw9IiNGRkZGRkYiIGZpbHRlcj0idXJsKCNidWJibGVTaGFkb3cpIiAvPg0KICAgICAgICAgICAgICAgICAgICAgICAgPC9zdmc+);
    height: 20px;
    width: 25px;
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    margin-left: -12px;
}

.bubble-center-bottom:after {
    content: "";
    background: url(data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGVmcz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGZpbHRlciBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBpZD0iYnViYmxlU2hhZG93Ij4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxmZU9mZnNldCBkeT0iNyIgZHg9IjAiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJvZmZPdXQiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1IiBpbj0ib2ZmT3V0IiByZXN1bHQ9ImJsdXJPdXQiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iYmx1ck91dCIgaW49IlNvdXJjZUdyYXBoaWMiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZmlsdGVyPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGVmcz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjEyLDAgMjQsMTQgMCwxNCIgZmlsbD0iI0ZGRkZGRiIgZmlsdGVyPSJ1cmwoI2J1YmJsZVNoYWRvdykiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=);
    height: 14px;
    width: 25px;
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 50%;
    right: auto;
    margin-left: -12px;
}

.bubble-left-middle:after {
    content: "";
    background: url(data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGVmcz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGZpbHRlciBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBpZD0iYnViYmxlU2hhZG93Ij4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxmZU9mZnNldCBkeT0iMCIgZHg9Ii01IiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ib2ZmT3V0IiAvPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNCIgaW49Im9mZk91dCIgcmVzdWx0PSJibHVyT3V0IiAvPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9ImJsdXJPdXQiIGluPSJTb3VyY2VHcmFwaGljIiAvPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2ZpbHRlcj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2RlZnM+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIwLDAgMTIsMTIgMCwyNCIgZmlsbD0iI0ZGRkZGRiIgZmlsdGVyPSJ1cmwoI2J1YmJsZVNoYWRvdykiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=);
    height: 25px;
    width: 12px;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 100%;
    right: auto;
    margin-top: -12px;
}

.bubble-right-middle:after {
    content: "";
    background: url(data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGVmcz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGZpbHRlciBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiB5PSIwIiB4PSIwIiBpZD0iYnViYmxlU2hhZG93Ij4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxmZU9mZnNldCBkeT0iMCIgZHg9IjciIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJvZmZPdXQiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1IiBpbj0ib2ZmT3V0IiByZXN1bHQ9ImJsdXJPdXQiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iYmx1ck91dCIgaW49IlNvdXJjZUdyYXBoaWMiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZmlsdGVyPg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZGVmcz4NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBwb2ludHM9IjAsMTIgMTIsMCAxMiwyNCIgZmlsbD0iI0ZGRkZGRiIgZmlsdGVyPSJ1cmwoI2J1YmJsZVNoYWRvdykiIC8+DQogICAgICAgICAgICAgICAgICAgICAgICA8L3N2Zz4=);
    height: 25px;
    width: 12px;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 100%;
    margin-top: -12px;
}

.bubble-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0, .3);
    display: none;
    z-index: 40;
}

.bubble-bg-active {
    display: block;
}