Я создал всплывающую подсказку, используя Twitter Bootstrap.
Всплывающая подсказка отображается с тремя строками. Тем не менее, я хотел бы отображать всплывающую подсказку только с одной строкой.
Как изменить ширину всплывающей подсказки? Является ли это специфическим для Twitter Bootstrap или всплывающих подсказок?
Просто переопределите bootstrap.css
Значение по умолчанию в BS2 - max-width: 200px; Таким образом, вы можете увеличить его с учетом любых потребностей.
.tooltip-inner {
max-width: 350px;
/* If max-width does not work, try using width instead */
width: 350px;
}
На BS3
.tooltip-inner {
min-width: 150px; /* the minimum width */
}
Вы должны перезаписать свойства, используя свой собственный css. так:
div.tooltip-inner {
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 6px;
background-color: #505050;
font-size: 14px;
}
селектор выбирает div, который поддерживает всплывающая подсказка (всплывающая подсказка добавляется в javascript и обычно не принадлежит ни одному контейнеру.
Я понимаю, что это очень старый вопрос, но если бы я приземлился здесь, то и другие. Поэтому я решил, что взвешиваю.
Если вы хотите, чтобы всплывающая подсказка реагировала на одну строку, независимо от того, сколько контента вы добавляете к ней, ширина должна быть гибкой. Однако Bootstrap запускает всплывающую подсказку до ширины, поэтому вам нужно хотя бы объявить, что это за ширина, и сделать ее гибкой от этого размера. Это я рекомендую:
.tooltip-inner {
min-width: 100px;
max-width: 100%;
}
min-width объявляет начальный размер. В отличие от максимальной ширины, как предполагал другой, которая объявляет ширину остановки. Согласно вашему вопросу, вы не должны объявлять окончательную ширину, или содержимое вашей всплывающей подсказки в конечном итоге будет завершено. Вместо этого вы используете бесконечную ширину или гибкую ширину. max-width: 100%; будет гарантировать, что после того, как всплывающая подсказка начнет работать со скоростью 100 пикселей в ширину, она будет расти и корректироваться к вашему контенту независимо от количества контента, содержащегося в нем.
СОХРАНИТЬ В РАЗУМ Подсказки не предназначены для переноса большого количества контента. Это может выглядеть забавно, если у вас длинная строка по всему экрану. И это определенно скажется на ваших отзывчивых взглядах, особенно на смартфоне (ширина 320 пикселей).
Я бы рекомендовал два решения для этого:
data-placement:right содержимое вашей всплывающей подсказки не будет отображаться на смартфонах (следовательно, почему bootstrap изначально заставлял их реагировать на его содержимое и разрешить его обертывание)@media к reset вашей подсказке, чтобы он соответствовал виду смартфона. Вот так:Моя демонстрация ЗДЕСЬ демонстрирует гибкость и отзывчивость всплывающих подсказок в зависимости от размера контента и размера экрана устройства
@media (max-width: 320px) {
.tooltip-inner {
min-width: initial;
width: 320px;
}
}
Определите максимальную ширину с помощью "important!" и используйте data-container = "body"
Файл CSS
.tooltip-inner {
max-width: 500px !important;
}
HTML-тег
<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>
JS script
$('.tooltiplink').tooltip();
Чтобы исправить проблему с шириной, используйте вместо этого следующий код.
$('input[rel="txtTooltip"]').tooltip({
container: 'body'
});
Пример: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
Другое решение; создайте новый класс (например, всплывающую подсказку) в CSS:
.tooltip-wide + .tooltip > .tooltip-inner {
max-width: 100%;
}
Используйте этот класс для элементов, где вы хотите использовать всплывающие подсказки:
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
Всплывающая подсказка Bootstrap генерирует разметку под элементом, содержащим всплывающую подсказку, поэтому HTML действительно выглядит примерно так после создания разметки:
<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">I am a long tooltip</div>
</div>
CSS использует это для доступа к смежному элементу (+) в .tooltip-wide и оттуда переходит к .tooltip-inner, прежде чем применять атрибут max-width. Это затронет только элементы, использующие класс .tooltip, все остальные всплывающие подсказки останутся неизменными.
Вы можете отредактировать класс .tooltip-inner css в bootstrap.css. Максимальная ширина по умолчанию - 200 пикселей. Вы можете изменить максимальную ширину до нужного размера.
после некоторых экспериментов это работало лучше всего для меня:
.tooltip-inner {
max-width: 350px; /* set this to your maximum fitting width */
width: inherit; /* will take up least amount of space */
}
Установите класс в основную подсказку всплывающей подсказки и для внутренней подсказки
div.tooltip {
width: 270px;
}
div.tooltip-inner {
max-width: 280px;
}
Пожалуйста, обратитесь к приведенной ниже статье. Ответ cmcculloh работал у меня. https://stackoverflow.com/posts/31683500/edit
Как указано в в документации, самый простой способ убедиться, что ваша всплывающая подсказка вообще не переносит, - это использовать
.tooltip-inner {
max-width: none;
white-space: nowrap;
}
При этом вам не нужно беспокоиться о значениях измерения или что-то в этом роде. Основная проблема заключается в том, что если у вас очень длинная строка текста, она просто исчезнет с экрана (как вы можете видеть в JSBin Example).
Просто переопределите значение по умолчанию max-width в соответствии с вашими потребностями.
.tooltip-inner {
max-width: 350px;
}
Когда max-width не работает (опция 1)
Если max-width не работает, вы можете использовать вместо этого заданную ширину. Это прекрасно, но ваши всплывающие подсказки больше не будут изменяться в соответствии с текстом. Если вам это не нравится, перейдите к опции 2.
.tooltip-inner {
width: 350px;
}
Правильное решение для небольших контейнеров (вариант 2)
Так как Bootstrap добавляет всплывающую подсказку как дочерний элемент цели, он сдерживается содержащим элементом. Если содержащийся элемент меньше вашего max-width, то max-width не будет работать.
Итак, когда max-width не работает, вам просто нужно изменить container:
<div class="some-small-element">
<a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>
Pro Tip: контейнер может быть любым селектором, что приятно, когда вы хотите только переопределить стили на нескольких подсказках.
BS3:
.tooltip-inner { width:400px; max-width: 400px; }
Попробуйте этот код,
.tooltip-inner {
max-width:350px !important;
}
У меня была такая же проблема, однако все популярные ответы - для изменения .tooltip-inner{width} для моей задачи не удалось выполнить работу правильно. Что касается других (то есть более коротких) всплывающих подсказок, то фиксированная ширина была слишком большой. Я ленился писать отдельные html-шаблоны/классы для zilions всплывающих подсказок, поэтому я просто заменил все пробелы между словами в каждой текстовой строке.
Настройка max-width класса tooltip-inner не работала для меня, я использую bootstrap 3.2
Некоторые параметры max-width работают только при установке ширины родительского класса (.tooltip).
Но тогда все подсказки становятся указанными вами размерами. Итак, вот мое решение:
добавьте Width к родительскому классу:
.tooltip {
width:400px;
}
Затем вы добавляете максимальную ширину и меняете отображение на встроенный блок, поэтому он не будет занимать все пространство
.tooltip-inner {
max-width: @tooltip-max-width;
display:inline-block;
}
Mine, где все переменные длины и максимальная ширина набора не будут работать для меня, поэтому установка моего css на 100% будет работать как прелесть.
.tooltip-inner {
max-width: 100%;
}
Мне нужно было отрегулировать ширину некоторых подсказок. Но не общая обстановка. Итак, я закончил этим:
CSS
.large-tooltip .tooltip-inner {
max-width: 300px;
}
@media screen and (max-width: 300px) {
.large-tooltip .tooltip-inner {
max-width: 100%;
}
}
JQuery
$('[data-toggle="tooltip"]')
.tooltip()
.on('shown.bs.tooltip', function(e) {
/**
* If the item that triggered the event has class 'large-tooltip'
* then also add it to the currently open tooltip
*/
if ($(this).hasClass('large-tooltip')) {
$('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
}
});
Html
<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
На BS4, и если вы не хотите изменять ширину всех всплывающих подсказок, вы можете использовать специальный шаблон для нужной подсказки:
<a href="/link" class="btn btn-info"
data-toggle="tooltip"
data-placement="bottom"
data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
title="This is a long message displayed on 400px width tooltip !"
>
My button label
</a>
в bootstrap 3.0.3 вы можете сделать это, изменив класс popover
.popover {
min-width: 200px;
max-width: 400px;
}