Местоположение всплывающей подсказки Bootstrap 5 не работает при проверке формы с атрибутом данных

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="container">
  <form class="row g-3 needs-validation" novalidate>
    <div class="col-3">
      <div class="input-group">
        <select class="form-select" aria-label="Select Day" required>
          <option selected disabled value="">Please select a day</option>
          <option value="mon">Monday</option>
          <option value="tues">Tuesday</option>
        </select>
        <div class="invalid-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Day tooltip">
          Please select a day
        </div>
      </div>
    </div>
    
    <div class="col">
      <button id="build" type="submit" class="btn btn-outline-success">Submit</button>
    </div>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

при добавлении:

data-bs-toggle="tooltip" data-bs-placement="top"

Исследовать:

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


validation bootstrap-5 tooltip custom-data-attribute
person DᴀʀᴛʜVᴀᴅᴇʀ    schedule 22.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это сложный вопрос, но я попробую.

Метод Tooltips для проверки формы, описанный в документации, не использует ToolTips API ... он просто использует свой стиль в отношении цвета и формы.

Это работает с помощью CSS-селектора ~ (непосредственно предшествующего) и изначально устанавливается на display: none. После проверки формы она запускает стиль с помощью CSS: допустимый селектор. Таким образом, всплывающая подсказка должна непосредственно предшествовать элементу формы (input или любому другому).

Классы _2 _ / _ 3_ имеют 3 очень важных атрибута, о которых вам нужно знать:

  position: absolute;
  top: 100%;
  z-index: 5;

Кроме того, поле формы содержится в классе position-relative, поэтому всплывающая подсказка располагается внизу этого div (или, скорее, на 100% сверху).

Если, например, вы хотите разместить всплывающую подсказку в верхней части div контейнера поля, вам нужно будет установить top: 0 в некотором настраиваемом классе CSS или просто встроенным в атрибут стиля, например:

<div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
    <div class="valid-tooltip" style="top: 0">
      Looks good! (Top)
    </div>
  </div>

Посмотрите несколько примеров на этот JSFiddle.

person Vino    schedule 24.02.2021