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

Я создал всплывающую подсказку с помощью 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 */
}

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

Если вы хотите, чтобы всплывающая подсказка реагировала только на одну строку, независимо от объема добавляемого в нее содержимого, ширина должна быть гибкой. Однако Bootstrap инициирует всплывающую подсказку на ширину, поэтому вам нужно как минимум объявить, какой будет эта ширина, и сделать ее гибкой, начиная с этого размера. Вот что я рекомендую:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

min-widthОбъявляет начальный размер. В отличие от максимальной ширины, как и некоторые другие, она объявляет ширину остановки . Согласно вашему вопросу, вы не должны объявлять окончательную ширину, иначе содержание всплывающей подсказки в конечном итоге будет перенесено в этот момент. Вместо этого вы используете бесконечную ширину или гибкую ширину. max-width: 100%;будет гарантировать, что после всплывающей подсказки шириной 100 пикселей она будет расти и адаптироваться к вашему контенту независимо от того, сколько у вас в нем контента.

Держите в уме Подсказки не предназначены для перевозки большого количества контента. Это может выглядеть странно, если у вас есть длинная строка по всему экрану. И это определенно повлияет на ваши отзывчивые взгляды, особенно на смартфон (ширина 320 пикселей).

Я бы порекомендовал два решения для этого:

1. Держите содержание всплывающей подсказки минимальным, чтобы его ширина не превышала 320 пикселей. И даже если вы сделаете это, вы должны помнить, если у вас есть всплывающая подсказка в правой части экрана и сdata-placement:right , содержимое всплывающей подсказки не будет отображаться на смартфонах (поэтому изначально программа начальной загрузки разработала их так, чтобы они реагировали на ее содержимое и позволяли ей заворачивать)
2. Если вы склонны к использованию этой однострочной концепции всплывающей подсказки, то закройте свои шесть, используя @mediaзапрос, чтобы сбросить всплывающую подсказку в соответствии с видом смартфона. Как это:

Моя демонстрация ЗДЕСЬ демонстрирует гибкость и отзывчивость подсказок в зависимости от размера контента и размера дисплея устройства.

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

Вы должны перезаписать свойства, используя свой собственный 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 и обычно не принадлежит ни одному контейнеру.

Определите максимальную ширину с "важным!" и использовать 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 скрипт

$('.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-wide, все остальные подсказки останутся неизменными.

Вы можете редактировать класс .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 */ 
}

Просто max-widthизмените значение по умолчанию на то, что соответствует вашим потребностям.

.tooltip-inner {
  max-width: 350px;
}

Когда максимальная ширина не работает (вариант 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>

Совет от профессионала: контейнер может быть любым селектором, что хорошо, когда вы хотите переопределить стили только в нескольких подсказках.

Установите класс для основной подсказки div и для внутренней подсказки

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 ).

BS3:

.tooltip-inner { width:400px; max-width: 400px; }

На Bootstrap 4, и если вы не хотите изменять ширину всех всплывающих подсказок, вы можете использовать определенный шаблон для нужной подсказки:

<a href="https://stackoverflow.com/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>

Попробуйте этот код,

.tooltip-inner {
     max-width:350px !important;
}

У меня была та же самая проблема, однако все популярные ответы - измениться .tooltip-inner{width}для моей задачи не смогли сделать работу правильно. Что касается других (то есть более коротких) всплывающих подсказок, то фиксированная ширина была слишком большой. Мне было лень писать отдельные html-шаблоны / классы для zilions всплывающих подсказок, поэтому я просто заменил все пробелы между словами  в каждой текстовой строке.

Мне нужно было отрегулировать ширину некоторых подсказок. Но не общая обстановка. Итак, я закончил делать это:

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." />

Установка максимальной ширины класса tooltip-inner у меня не сработала , я использую bootstrap 3.2

Некоторые, как установка максимальной ширины работает только если вы устанавливаете ширину родительского класса (.tooltip).

Но тогда все всплывающие подсказки будут соответствовать указанному вами размеру. Итак, вот мое решение:

добавить ширину к родительскому классу:

.tooltip {
  width:400px;
}

Затем вы добавляете max-width и меняете отображение на inline-block, чтобы оно не занимало все пространство

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

Мой, где все переменные длины и установленная максимальная ширина не будут работать для меня, поэтому установка моего CSS на 100% работает как шарм.

.tooltip-inner {
    max-width: 100%;
}

С Bootstrap 4 я использую

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

в начальной загрузке 3.0.3 вы можете сделать это, изменив класс popover

.popover {
    min-width: 200px;
    max-width: 400px;
}