Проблемы с созданием всплывающей подсказки над кнопкой вне потока документов - PullRequest
Новая
       39

Проблемы с созданием всплывающей подсказки над кнопкой вне потока документов

0 голосов
/ 04 июля 2018

Я пытаюсь создать всплывающую подсказку, чтобы расположить сверху кнопку вне потока документов. Кнопка находится внутри контейнера с примененной к нему сеткой дисплея. Однако ширина всплывающей подсказки, по-видимому, определяется родительским контейнером или близостью к краю поля сетки, что не соответствует ожидаемому.

Любые идеи, почему это так и как исправить?

Я попытался повторить ошибку ниже, но редактор не поддерживает сетку отображения.

Спасибо. 

.tooltip {
  opacity:0;
  background:grey;
  color: white;
  
  }
  
  button:hover ~ div{
      opacity: 1;
      }
      

.fee {
    display: grid;
    grid-template-columns: 3rem 7rem 14rem 3rem 5rem 6rem;
    grid-column-gap: 1rem;
    grid-row: 3;
  }
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="fee flex items-center px-4 border-r border-b border-l m-8">
  <div class="w-32 h-12"></div>
  <span class="flex flex-col justify-center">
   
      </span>
  <div class="w-24"></div>
  <div></div>
  <div class="w-12"></div>
  <div class="w-12"></div>
  <div class="">
    <div class="text-center">
      <div class="tooltip-button">
        <button> Delete</button>
        <div class="tooltip absolute">
       tooltip display 
        </div>
      </div>
    </div>
  </div>
  <span class="hidden"></span>
</div>

1 Ответ

0 голосов
/ 04 июля 2018

Вы можете использовать всплывающую подсказку, брат 

$(document).ready(function () {
          $('[data-toggle="tooltip"]').tooltip();
      });
.fee {
    display: grid;
    grid-template-columns: 3rem 7rem 14rem 3rem 5rem 6rem;
    grid-column-gap: 1rem;
    grid-row: 3;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="fee flex items-center px-4 border-r border-b border-l m-8">
  <div class="w-32 h-12"></div>
  <span class="flex flex-col justify-center">
   
      </span>
  <div class="w-24"></div>
  <div></div>
  <div class="w-12"></div>
  <div class="w-12"></div>
  <div class="">
    <div class="text-center">
      <div class="tooltip-button">
        <button data-toggle="tooltip" title="Tooltip Display"> Delete</button>
        <div class="tooltip absolute">
       tooltip display 
        </div>
      </div>
    </div>
  </div>
  <span class="hidden"></span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Нажмите Здесь для получения дополнительной информации о всплывающей подсказке

...