O
O
okovalev2018-01-30 13:09:05
JavaScript
okovalev, 2018-01-30 13:09:05

Tweaking Popover in Bootstrap. How to do?

5a6f707687ddc054913987.png

Here is a sample code -> https://jsfiddle.net/uy7ncv6g/
You need to click on the details->then on the question.
Here is the code responsible for this:

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

Here is a link to the documentation -> https://getbootstrap.com/docs/4.0/components/popovers/

Question:
1. How to make normal popovers that would shove a large amount of formatted code?
How to change popup width? Maybe make some kind of JavaScript object?
2. I decided to refuse form processing on the client, and therefore I want to save when clicking on. All data was collected and sent to the server, and the server returned the updated html. How can I make a nice button? Is there a sending animation in the bootstrap (that is, so that during the time between the request and the response from the server, the user is somehow notified that they say we are working. Wait)

Thank you

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel, 2018-01-30
@PavelMonro

1. class .popover has min-width and max-width, remove or change these parameters.
In order to make formatted code in them, you need to change:

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

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

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question