всплывающая подсказка начальной загрузки не показывает цвет контекста

У меня была проблема, когда мои всплывающие подсказки не отображались поверх моей таблицы данных. Я решил это, добавив data-container='body' в качестве атрибута (как описано здесь), который теперь показывает полную подсказку, но создает новую проблему; он удаляет контекст всплывающей подсказки.

Например:

<div class="text-info tooltip-info" 
     data-rel="tooltip" 
     data-html="true" 
     data-original-title="     
       <div class=&quot;text-left&quot;>         
          <i><b>Commercial decision:</b> <br> </i> <br>          
          <i><b>Technical decision:</b> <br> </i> <br>       
          <i><b>Overall decision:</b> <br> </i>     
       </div>" 
     style="font-weight: bold;overflow: auto;">
     Pending
</div>

дает:

введите здесь описание изображения

который не отображается поверх таблицы данных, но имеет правильный контекст.

Добавление data-container='body' дает:

введите здесь описание изображения

которые отображаются правильно, но не показывают никакого контекста.

Как правильно отображать всплывающую подсказку, сохраняя нужный контекст?


html twitter-bootstrap twitter-bootstrap-3 datatables
person nluigi    schedule 03.11.2017    source источник
comment
Тест-кейс значительно повысит ваши шансы на получение ответа.   -  person Gyrocode.com    schedule 07.11.2017
comment
Какие контексты отсутствуют, что вы искали?   -  person Daniel A Sathish Kumar    schedule 13.11.2017
comment
Как упомянул @ochi, скрипка была бы полезна. Пробовали ли вы проверять всплывающую подсказку в консоли браузера (щелкните ее правой кнопкой мыши, затем проверьте), чтобы увидеть, какие классы получают разные всплывающие подсказки с различными параметрами контейнера, которые вы установили. Оттуда вы сможете увидеть, почему цвет не такой, как вы ожидаете, и обновить свой CSS оттуда (или динамически добавить классы во всплывающую подсказку).   -  person Phil    schedule 14.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я надеюсь, что это решит вашу проблему. если нет, то я тоже хотел бы спросить ваш код. тогда легко проверить.

$('[data-toggle="tooltip"]').tooltip(); 
.parent-container {
  width: fit-content;
  position: relative;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="parent-container"><div class="" data-toggle="tooltip"  data-placement="right" data-container=".parent-container" data-html="true" title="     
       <div class=&quot;text-left&quot;>         
          <i><b>Commercial decision:</b> <br> </i> <br>          
          <i><b>Technical decision:</b> <br> </i> <br>       
          <i><b>Overall decision:</b> <br> </i>     
       </div>" 
     style="font-weight: bold;overflow: auto;">
  Pendings
</div></div>

person Sodhi saab    schedule 10.11.2017