Тонкая настройка Popover в Bootstrap. Как сделать?

Question

[okovalev]

Вот пример кода -> https://jsfiddle.net/uy7ncv6g/
Нужно кликнуть детали->потом по вопросику.
Вод код, который за это отвечает:

<span class="badge badge-secondary badge-pill" data-toggle="popover" title="Информация" data-placement="bottom" data-content="xxx:
стою на остановке. замерз.
начинаю описывать круги вокруг этой остановки. люди смотрят сначала с непониманием, потом с завистью. а я уже разогнался, порозовел, пар изо рта...
смотрю - за мной начала бегать какая-то барышня лет студента. за ней - ещё парень.
в общем, набралось нас человек десять-пятнадцать, бегаем чётким хороводиком. и тут барышня за мной начинает хлопать локтями и напевать танец маленьких утят
дружный ржач, я песенку поддерживаю.
и чо б ты думал? полтора десятка взрослых людей бегают танец маленьких утят вокруг остановки.)">?</span>

Вот ссылка на документацию -> https://getbootstrap.com/docs/4.0/components/popovers/

Вопрос:
1. Как сделать нормальный popovers, что бы пихнуть большое количество отформатированного кода?
Как изменить ширину всплывающего окна? Может быть сделать какой-то JavaScript объект?
2. Я решил отказаться от обработки формы на клиенте, и поэтому хочу, что бы при клике по сохранить. Все даные собирались и уходили на сервер, а сервер возращал обновленный html. Как мне сделать красивую кнопку? Есть ли в бустрап анимация отправки (т.е. что бы во время между запросом и ответом от сервера, пользователя как-то оповещали, что дескать работаем. Ждите)

Спасибо

Answer 1

[Павел]

1. У class .popover есть min-width и max-width, убрать или поменять данные параметры.
.popover {min-width:300px;max-width:800px;}
Для того чтобы сделать форматированный код в них, надо поменять:

<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
	</script>

На

<script>
$('[data-toggle="popover"]').popover({
  html: true
})
	</script>

2. https://bootsnipp.com/snippets/featured/loading-button

Comments

[okovalev]

Павел Спасибо. С батоном, то что искал)

$(function () {
  $('[data-toggle="popover-info"]').popover({
	container: 'body',
	content: 'Хренов 21 век.
Купчино. Утро. Мрак. Стоит народ на остановке, люди подтягиваются в ожидании трамвая. Подходит девушка серая неприметная. Вокруг утренняя унылая тишина, тут эта девушка вскрикивает "&#^%#^!" и начинает звонить кому-то:
- Я забыла ключи и уже на остановке, можешь захватить с собой?
- ...
- Никуда не поедешь? Черт черт черт!
- ...!!!
- оооууу...
- ....
- аахах, круто. Давай.
Довольная кладет трубку, стоит ждет. Трамвай подошел минут через пять, все сели, проехали остановку, на следующей девушка на половину высовывается из двери, подлетает Дрон! На коптере изолентой пришмандачена связка ключей. Мадама довольная отвязывает и отправляет голубиную почту обратно в полёт. Бабуськи в ахуе. Я в восторге.'
  })
})

Единственное, мне html, как таковой даже не нужен. Я не знаю как в объект вставить несколько строк кода красиво т.к. у меня сейчас какой-то борода выходит, еще и ковычки в тексте сбивают парсер...
Может как-то переменную создать, или еще какой-то способ простой, изящный и правильный есть?

[Павел]

okovalev, если добавите Html:true то сможете фортирование html использовать, т.е. по сути вставлять
-перенос строки, параграфы - и т.д.