Як ви змінюєте ширину та висоту підказки Twitter Bootstrap?

Я створив підказку за допомогою Twitter Bootstrap.

Підказка відображається трьома рядками. Однак я хотів би відобразити підказку лише одним рядком.

Як змінити ширину підказки? Це специфічно для Twitter Bootstrap або для самих підказок?

Просто переосмислите bootstrap.css

Значення за замовчуванням у BS2 - максимальна ширина: 200 пікселів; Таким чином, ви можете збільшити його на все, що відповідає вашим потребам.

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

Підказки KEEP IN MIND не містять великого вмісту. Це може виглядати дивно, якби у вас довга струна на всьому екрані. І це, безумовно, матиме вплив на ваші чуйні погляди, особливо смартфон (ширина 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-широкого розміру, а звідти переходить до .tooltip-Internal, перш ніж застосовувати атрибут max-width. Це вплине лише на елементи, що використовують клас .tooltip, всі інші підказки залишаться незмінними.

Ви можете редагувати .tooltip-внутрішній клас 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)

Якщо максимальна ширина не працює, ви можете використати встановлену ширину. Це добре, але підказки більше не змінюватимуть розмір тексту. Якщо вам це не подобається, перейдіть до пункту 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.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-шаблони / класи для зільйонів підказок, тому я просто замінив усі пробіли між словами  на кожен рядок тексту.

Мені потрібно було відрегулювати ширину деяких підказок. Але не загальна обстановка. Тому я закінчила це робити:

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

Встановлення максимальної ширини підказки для внутрішнього класу для мене не працювало , я використовую завантажувальний пристрій 3.2

Деякі способи встановлення максимальної ширини працюють лише в тому випадку, якщо встановити ширину батьківського класу (.tooltip).

Але тоді всі підказки набувають розмір, який ви вказуєте. Тож ось моє рішення:

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

.tooltip {
  width:400px;
}

Потім ви додаєте максимальну ширину і змінюєте дисплей на вбудований блок, щоб він не зайняв весь простір

.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;
}

в bootstrap 3.0.3 ви можете це зробити, змінивши клас popover

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