Как добавить детали в подсказку кроме заголовка - PullRequest
Новая
       34

Как добавить детали в подсказку кроме заголовка

1 голос
/ 05 марта 2020

Обычно мы используем всплывающую подсказку 

<button class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip On Right</button>

Здесь мы добавляем детали в титульную часть

Но у меня много деталей, которые необходимо добавить в элементы заголовка, например Изображение профиля, Обозначение, Имя, Фамилия и т. Д. c ...

Итак, я не могу передать его в заголовке

. Есть ли другой способ исправить это? ?

Также в данный момент эта подсказка появляется, когда я нахожу ее ... Мне нужно, чтобы она отображалась после нажатия на нее

Ответы [ 3 ]

2 голосов
/ 05 марта 2020

Как указано в комментариях, вы должны использовать Popovers вместо всплывающей подсказки. 

<link href="https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.4/dist/js/bootstrap.bundle.min.js"></script>
<script>
  $(function() {
    $('[data-toggle="popover"]').popover()
  })
</script>
<h1>Popover Example</h1>
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="Popove`enter code here`r content. example content for popover">Click to toggle popover</button>

Также вы можете HTML добавить более гибкий контент.

Ссылка: Bootstrap Popovers Docs

1 голос
/ 05 марта 2020

Вы можете использовать абсолютное div и показать / скрыть его, когда вы нажимаете на кнопку, используя немного javascript. И расположите его так, как вы хотите.

Это «классический» 1013 * способ сделать это. Без каких-либо плагинов или библиотек. 

const button = document.getElementById('tooltip-btn');

button.onclick = function() {
const tooltip = document.getElementById('tooltip-content');
  tooltip.style.display === 'none' ?
  tooltip.style.display = 'inline-block ' : tooltip.style.display = 'none'
  }
div#tooltip-content {
  background-color: grey;
  border-radius: 10px;
  padding: 10px;
  position:absolute;
  left:80px;
  top:25px;
 
}

.tooltip-wrapper {
  position:relative;
}
<div class="tooltip-wrapper">
  <button id="tooltip-btn" class="btn btn-success">Tooltip On Right</button>
  <div id="tooltip-content" style="display:none">
    <h2>SOme title</h2>
    <p>Some text here Some text here Some text here </p>
    <a href="#"> Link here</a>
  </div>
</div>
0 голосов
/ 05 марта 2020

Пользовательские всплывающие окна вместо всплывающей подсказки. найти документ здесь

...