Member 14931106 Ответов: 1

Применять различные стили для каждой подсказки bootsrap

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

Как я могу придать им другой стиль?

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

Что я уже пробовал:

https://jsfiddle.net/Lgjosnf4/
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<i id="info" class="ion-information-circled"  data-toggle="tooltip" data-html="true" data-container="body" data-placement="bottom" title="icon1"></i>'
<i class="ion-folder" id="fopen" data-toggle="tooltip" data-html="true" data-container="body" data-placement="bottom" title="icon2" ></i>


.tooltip-inner { 
  text-align: left;
  max-width: 100% !important;
  height: 35px;
  width:280px;
  } 

$(document).ready(function(){
           $('[data-toggle="tooltip"]').tooltip();
         });

1 Ответов

Рейтинг:
7

Richard Deeming

Вам нужно будет указать другой шаблон для каждой всплывающей подсказки, как описано в документации:

Всплывающие подсказки · Bootstrap v4.5[^]:
шаблон - базовый HTML-код, используемый при создании всплывающей подсказки.
Это позволит вам добавить пользовательский класс CSS во всплывающую подсказку, который вы можете настроить в своей таблице стилей.

Если вы зададите шаблон с помощью data- атрибуты, вам нужно будет HTML-кодировать его.

Напр.:
<i .. data-toggle="tooltip" data-template='&lt;div class="tooltip tooltip-xl" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'>
.tooltip-xl .tooltip-inner {
    text-align: left;
    max-width: 100% !important;
    height: 35px;
    width:280px;
}
Демонстрация[^]