реагировать bootstrap 4 позиция подсказки не будет двигаться

Question

Я новичок в игре с подсказками и оверлеями, поэтому, пожалуйста, прости меня, если я пропускаю некоторые очевидные реквизиты. Я пытаюсь визуализировать всплывающую подсказку прямо справа от кнопки с дополнительным правым отступом, но кажется, что она застряла на месте, и никакие примененные классы в css, которые я пробовал, переместят ее: (

Что, черт возьми, я делаю не так? Могу ли я пропустить некоторые подпорки, чтобы исправить положение всплывающей подсказки чуть правее?

           <OverlayTrigger
                    key='right'
                    placement='right'
                    trigger='click'
                    overlay={
                      <Tooltip id={`tooltip-right`} show={this.state.tooltip} className="cardtooltip">
                        <img onClick={()=>{this.tooltipHandler()}} styles={{width: '20%', height: '25%'}}src={card.img}></img>
                      </Tooltip>
                    }
                   >
                     <img key={img} onClick={()=>this.tooltipHandler()} src={card.img} style={{width: '1em', height: '1em'}}/>
                  </OverlayTrigger>

Я также должен указать, что это css переместит всплывающую подсказку вправо после рендеринга страницы, однако, когда я переоцениваю sh страницу, css не применяется.

#tooltip-right{
  min-width: 10em !important;
  max-width: 70em;
  margin-right: 0 !important;
  margin-left: 18em !important;
  background: blue;
}
.tooltip.bs-tooltip-right .tooltip-inner {
  background:white !important;
}

.tooltip .arrow:before {
  border-bottom-color:#444 !important;
  border-top-color:#444 !important;
  border-left-color: white !important;
}