Bootstrap 4 форматирования текста всплывающей подсказки

Question

Я пытался сделать так, чтобы подсказки на моем сайте выглядели красиво, и недавно натолкнулся на подсказки на Godaddy.com, которые я хотел бы иметь возможность копировать форматирование текста на:

В настоящее время мои собственные всплывающие подсказки выглядят так:

Это мой текущий код, очень важно, чтобы всплывающая подсказка появлялась при наведении на изображение (выглядит грязно, я знаю, но, пожалуйста, не обращайте на это внимания):

<img src="image URL here" width="20" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! If you do not wish to use this leave 'None'">

В первую очередь я пытаюсь создать новые строки в подсказке.

Любые предложения будут очень ценится!

Answer 1

Вы можете сделать что-то вроде этого:

вы можете добавить новую строку, добавив <br /> между содержимым, которое должно работать для вас.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  text-align: justify;
  /* This is what you need */
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

   <div class="tooltip">Hover me
  <span class="tooltiptext">A short description of your project/solution (max 250 characters), will only be displayed on the home screen. <br /> <br /> Second para not in your post! If you do not wish to use this leave 'None</span>
</div>

Answer 2

Исправлено добавлением

data-html="true"

Это позволило мне использовать <br/> в тексте заголовка

Окончательный фрагмент кода:

<img src="image URL here" width="20" data-html="true" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! <br/> If you do not wish to use this leave 'None'">