Я создаю страницу с помощью Bootstrap 3. Я пытаюсь использовать всплывающее окно с placement: right
элементом ввода. Новый Bootstrap гарантирует, что, если вы используете, у form-control
вас будет элемент ввода полной ширины.
HTML-код выглядит примерно так:
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
На мой взгляд, ширина всплывающих окон слишком мала, потому что их ширины не осталось в div. Мне нужна форма ввода слева и широкое всплывающее окно справа.
В основном я ищу решение, в котором мне не нужно переопределять Bootstrap.
Прикрепленный JsFiddle. Второй вариант ввода. Я не часто использовал jsfiddle, поэтому не знаю, но попробуйте увеличить размер поля вывода, чтобы увидеть результаты, на небольших экранах его даже не увидишь. http://jsfiddle.net/Rqx8T/
источник
$('[data-toggle="popover"]').popover({ container: 'body' });
!important
data-container="body"
в элементеcontainer: "body"
.Мне также нужно было более широкое всплывающее окно для текстового поля поиска. Я придумал это решение Javascript (здесь, в Coffee ):
$(".product-search-trigger") .click(-> false) # cancel click on <a> tag .popover container: "body" html: true placement: "left" title: "<strong>Product search</strong> enter number or name" .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))
Обходной путь находится в последней строке. Перед отображением всплывающего окна для параметра max-width устанавливается произвольное значение. Вы также можете добавить собственный класс к элементу подсказки.
источник
.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
max-width
. Спасибо за это решение! Кстати, вместо этого"600px"
я установил"none"
. Мне так лучше.У меня такая же проблема. Потратил некоторое время на поиск ответа и нашел свое собственное решение: добавьте следующий текст в заголовок:
источник
Чтобы изменить ширину, вы можете использовать css
Требуется фиксированный размер
.popover{ width:200px; height:250px; }
Для максимальной ширины требуется:
.popover{ max-width:200px; height:250px; }
jsfiddle : http://jsfiddle.net/Rqx8T/2/
источник
Чтобы изменить ширину всплывающего окна, вы можете переопределить шаблон:
$('#name').popover({ template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>' })
источник
max-width: 500px
стиль.Для людей, предпочитающих решение на JavaScript. В Bootstrap 4 tip () превратился в getTipElement () и не возвращает объект jQuery. Итак, чтобы изменить ширину всплывающего окна в Bootstrap 4, вы можете использовать:
}).on("show.bs.popover", function() { $($(this).data("bs.popover").getTipElement()).css("max-width", "405px"); });
источник
width
не былиmax-width
<div class="row" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content."> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" /> </div> </div>
В основном я помещаю код всплывающего окна в строку div вместо входного div. Решил проблему.
источник
С помощью того, что @EML описал выше относительно всплывающих окон в модальных окнах, а также кода, показанного @ 2called-chaos, вот как я решил проблему.
У меня есть значок в модальном окне, при нажатии на который должно появиться всплывающее окно
Мой HTML
<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>
Мой сценарий
$('[rel=popover]').popover({ placement: 'bottom', html: 'true', container: '#name-of-modal-window .modal-body' }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
источник
Окончательного решения здесь нет: / Только мысли, как «чисто» решить эту проблему ...
Обновленная версия (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" вместо class = "col-md-") вашего исходного JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/
Теперь тот же JSFiddle с предложенным вами решением : http://jsfiddle.net/tkrotoff/N99h7/8/
Это не работает: всплывающее окно расположено относительно
<div class="col-*">
+ представьте, что у вас есть несколько входов для одного и того же<div class="col-*">
...Итак, если мы хотим сохранить всплывающее окно на входах (семантически лучше):
.popover { position: fixed; }
: но тогда каждый раз, когда вы прокручиваете страницу, всплывающее окно не будет следовать за прокруткой.popover { width: 100%; }
: не так хорошо, так как вы все еще зависите от родительской ширины (т.е.<div class="col-*">
.popover-content { white-space: nowrap; }
: хорошо, только если текст внутри всплывающего окна короче, чемmax-width
См. Http://jsfiddle.net/tkrotoff/N99h7/11/
Возможно, при использовании новейших браузеров новые значения ширины CSS могут решить проблему, я не пробовал.
источник
container: 'body'
обычно помогает (см. ответ JustAnil выше), но проблема возникает, если ваше всплывающее окно находится в модальном режиме. Вz-index
помещает его за модальным когда поповер присоединено кbody
. Кажется, это связано с проблемой 5014 BS2 , но я получаю ее на 3.1.1. Вы не должны использовать acontainer
ofbody
, но если вы исправите код на$('#fubar').popover({ trigger : 'hover', html : true, dataContainer : '.modal-body', ...etc });
затем вы
z-index
устраняете проблему, но ширина всплывающего окна по-прежнему неверна.Единственное исправление, которое я могу найти, - это использовать
container: 'body'
и добавить дополнительный css:.popover { max-width : 400px; z-index : 1060; }
Обратите внимание, что решения css сами по себе работать не будут.
источник
tooltip-append-to-body
, она появилась за модальным и модальным фоном, выделенным серым цветом.Вы можете использовать атрибут data-container = "body" в popover
<i class="fa fa-info-circle" data-container="body" data-toggle="popover" data-placement="right" data-trigger="hover" title="Title" data-content="Your content"></i>
источник
Вот способ сделать это с помощью наведения курсора, не связанный с кофе:
$(".product-search-trigger").popover({ trigger: "hover", container: "body", html: true, placement: "left" }).on("show.bs.popover", function() { return $(this).data("bs.popover").tip().css({ maxWidth: "300px" }); }); });
источник
Одно протестированное решение для бета-версии Bootstrap 4:
.popover { min-width: 30em !important; }
Вместе с оператором jQuery:
$('[data-toggle="popover"]').popover({ container: 'body', trigger: 'focus', html: true, placement: 'top' })
Побочное примечание,
data-container="body"
илиcontainer: "body"
в любом HTML или какoption
кpopover({})
объекту действительно не сделать трюк [возможно сделать работу , но только вместе с утверждением CSS];Также помните, что бета-версия Bootstrap 4 полагается на popper.js для позиционирования всплывающих окон и всплывающих подсказок (до этого это был tether.js).
источник
Вы можете настроить ширину всплывающего окна с помощью методов, указанных выше, но лучше всего определить ширину содержимого до того, как Bootstrap увидит его и выполнит свои вычисления. Например, у меня была таблица, я определил ее ширину, а затем bootstrap построил всплывающее окно, которое ей подходит. (Иногда Bootstrap не может определить ширину, и вам нужно войти и взять его за руку)
источник
Я использовал это (работает нормально):
.popover{ background-color:#b94a48; border:none; border-radius:unset; min-width:100px; width:100%; max-width:400px; overflow-wrap:break-word; }
источник
<label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-placement="right" id="Pops" ></a> <div id="popover-content" class="hide"> <div class="popovermenu"> Your content </div> </div>
Я заканчиваю тем, что устанавливаю ширину div "popover-content" на нужное мне число. (другие идентификаторы или классы не будут работать .....) Удачи!
#popover-content{ width: 600px; }
источник
вы также можете добавить data-container = "body", который должен выполнять эту работу:
<div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-container="body" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div>
источник
Вы можете изменить шаблон вашего всплывающего окна. Либо с
data-template
атрибутом -attribute, либо с соответствующей частью функции, которая его устанавливает:<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class="popover fade top in" style="max-width:none;" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span> </body> </html>
источник
В Bootstrap 4 вы можете легко просмотреть параметр шаблона, переопределив max-width:
$('#myButton').popover({ placement: 'bottom', html: true, trigger: 'click', template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' });
Это хорошее решение, если у вас есть несколько всплывающих окон на странице.
источник
Для компонента машинописного текста:
@Component({ selector: "your-component", templateUrl: "your-template.component.html", styles: [` :host >>> .popover { max-width: 100%; } `] })
источник
В Angular
ng-bootstrap
вы можете простоcontainer="body"
использовать элемент управления, который запускает всплывающее окно (например, кнопку или текстовое поле). Затем в вашем глобальном файле (style.css
илиstyle.scss
) файле стиля вы должны добавить.popover { max-width: 100% !important; }
. После этого содержимое всплывающего окна автоматически установится на его ширину.источник
В bootstrap 4 вы можете просто переопределить значение по умолчанию для переменной начальной загрузки
$popover-max-width
в вашем файле styles.scss следующим образом:$popover-max-width: 300px; @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; @import "node_modules/bootstrap/scss/popover";
Подробнее о переопределении значений по умолчанию для начальной загрузки 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
источник
Попробуй это:
var popover_size=($('.popover').css('width')); var string=(popover_size).split('px'); alert("string"+string); popover_size = ((parseInt(string[0])+350)); alert("ps"+popover_size); $('.popover').css('width',parseInt(popover_size));
источник
$('.popover').css('width', popover_size + 'px');
Поскольку popover_size анализируется как целое число. Другое дело, что:popover_size = ((parseInt(string[0])+350));
добавлю ширины.