Customized theme: wrong arrow color when resizing window

[MagusX]

I have a customized right-side tooltip and its arrow color is red, and I want it to be on the left when I resize my window (when not enough space for right-side tooltip), it goes to the left but the color of the arrow becomes black. Here's the image: https://imgur.com/a/38SiUwO

jquery

$('.ttip').tooltipster({
   theme: ['tooltipster-default', 'tooltipster-default-customized'],
   side: ['right','left'],
   zIndex: 0
});

css

.tooltipster-sidetip.tooltipster-default.tooltipster-default-customized .tooltipster-box {
    background: #f2dede; //kinda-white
    border: 1px solid #db3232; //red
}
.tooltipster-sidetip.tooltipster-default.tooltipster-default-customized .tooltipster-arrow {
    overflow: hidden;
    position: absolute;
    width: 9px;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-default-customized .tooltipster-arrow-background {
    border-color: #f2dede; //kinda-white
    left: 1px;
}
.tooltipster-sidetip.tooltipster-default.tooltipster-default-customized .tooltipster-arrow-border {
    border-color: #db3232; //red
}

.tooltipster-sidetip.tooltipster-default.tooltipster-default-customized .tooltipster-content {
    color: #f00000; //red
    padding: 8px;
}

Also, the tooltip does go to the left when dragging the right edge of the window but when I drag it a bit more to the left, the tooltip doesn't go to the left but stretching itself to fit the narrow space, causing overlap with other tooltips. Image: https://imgur.com/a/qWQChk9 Thank you.

[louisameline]

Hi, first issue: you wrote border-color: #f2dede; //kinda-white, you probably meant background-color. Second issue: use min-width. Thank you