Svg & Popover Bootstrap 3 / Информация / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Информация

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 0.9 Kb

Уникальный ID: 3286

Количество символов:

Посмотрели: 1822 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-3286-20

Скачали бесплатно: 46 раз

Прокомментировали: 0 раз

Рейтинг: 4.3 / 5 - 6 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: svg popover, Информер, bootstrap 3, popover, SVG, подключение информера

Поделился: BootstrapТема

Добавлено: 2019-01-15 в 14:51

Метка: 1547553105

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>

<style>
body{
background: #ADA996; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>

<div class="container"><h1 class="text-center">Svg & Popover<br />Bootstrap 3</h1><div class="row"><div class="col-md-4 col-md-offset-4"><hr />

<svg width="100" height="100">
 <a data-toggle="popover" data-container="body" title="Popover Header" data-content="Some content inside the popover" data-placement="right">
 <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="#694198" />
 </a>
</svg>

</div></div></div>

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