Основы Bootstrap4

Пopping Bootstrap4 Модальные окна Bootstrap4

Сообщения Bootstrap4

Контекстное меню - это маленькое всплывающее окно, которое появляется при наведении курсора на элемент и исчезает при его отводе.

Как создать контекстное меню

Добавление атрибута data-toggle="tooltip" к элементу Создадим контекстное меню.

Свойство title содержит содержимое, которое отображается в контекстном меню:

<a href="#" data-toggle="tooltip" title="Я подсказка!">Перетащите мышь сюда</a>

Внимание: Подсказки необходимо写入 инициализационный код jQuery: затем вызовите метод tooltip() на указанном элементе.

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

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Пример всплывающего окна</h2><br>
　　<a href="#" data-toggle="tooltip" title="Я подсказка!">Перетащите мышь сюда</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

Эффект работы после выполнения:

Определение位置的 всплывающего окна

По умолчанию всплывающее окно отображается над элементом.

Использование атрибута data-placement для определения направления отображения подсказки: top, bottom, left или right:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Пример всплывающего окна</h2><br>
　　<a href="#" data-toggle="tooltip" data-placement="top" title="Я подсказка!">Перетащите мышь сюда</a>
　　<a href="#" data-toggle="tooltip" data-placement="bottom" title="Я подсказка!">Перетащите мышь сюда</a>
　　<a href="#" data-toggle="tooltip" data-placement="left" title="Я подсказка!">Перетащите мышь сюда</a>
　　<a href="#" data-toggle="tooltip" data-placement="right" title="Я подсказка!">Перетащите мышь сюда</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

Эффект работы после выполнения:

Использование в кнопке:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Подсказка сверху">
	　　Подсказка сверху
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Подсказка справа">
	　　Подсказка справа
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Подсказка снизу">
	　　Тултип снизу
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Тултип слева">
	　　Тултип слева
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

Эффект работы после выполнения:

Добавьте содержимое тултипа с HTML-тегами, установите data-html="true", содержимое поместите в тег title:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Тултип</em> <u>с</u> <b>HTML</b>>
　　Тултип с HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

Эффект работы после выполнения:

Отключить кнопку:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap пример</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Отключенная подсказка">
	　　<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Отключенная кнопка</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

Эффект работы после выполнения:

Пopping Bootstrap4 Модальные окна Bootstrap4