Bootstrap4 Tutoriales básicos

Bootstrap4 Cuadro emergente Bootstrap4 Cuadro de diálogo

Bootstrap4 Cuadro de información

El cuadro de información es una pequeña ventana emergente que se muestra al pasar el ratón sobre el elemento y desaparece al salir del elemento.

¿Cómo crear un cuadro de información?

Agregando data a los elementos-toggle="tooltip" ¡Vamos a crear un cuadro de información!

El contenido de la propiedad title es el contenido que se muestra en el cuadro de información:

<a　href="#"　data-toggle="tooltip" title="¡Soy el contenido del tooltip!">¡Mueve el ratón aquí</a>

Atención: El cuadro de información debe escribirse en el código de inicialización de jQuery: luego llame al método tooltip() en el elemento especificado.

Los siguientes ejemplos pueden usar cuadros de información en cualquier lugar del documento:

示例

<!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>¡Ejemplo de cuadro de información</h2><br>
　　<a　href="#"　data-toggle="tooltip" title="¡Soy el contenido del tooltip!">¡Mueve el ratón aquí</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prueba y mira ‹/›

Efecto después de ejecutar:

Especificar la posición del cuadro de información

Por defecto, el cuadro de información se muestra en la parte superior del elemento.

Se puede usar data-La propiedad placement se utiliza para definir la dirección de visualización del cuadro de información: top, bottom, left o 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>¡Ejemplo de cuadro de información</h2><br>
　　<a　href="#"　data-toggle="tooltip"　data-placement="top" title="¡Soy el contenido del tooltip!">¡Mueve el ratón aquí</a>
　　<a　href="#"　data-toggle="tooltip"　data-placement="bottom" title="¡Soy el contenido del tooltip!">¡Mueve el ratón aquí</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>

Prueba y mira ‹/›

Efecto después de ejecutar:

在按钮中使用:

示例

<!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="Tooltip　on　top">
	　　Tooltip　on　top
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="right"　title="Tooltip　on　right">
	　　Tooltip　on　right
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="bottom"　title="Tooltip　on　bottom">
	　　Tooltip　on　bottom
	</button>
	<button　type="button"　class="btn　btn-secondary"　data-toggle="tooltip"　data-placement="left"　title="Tooltip　on　left">
	　　Tooltip　on　left
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prueba y mira ‹/›

Efecto después de ejecutar:

提示内容添加 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>Tooltip</em>　<u>with</u>　<b>HTML</b>
　　Tooltip　with　HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prueba y mira ‹/›

Efecto después de ejecutar:

禁用按钮：

示例

<!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="Tooltip deshabilitado">
	　　<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Botón deshabilitado</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prueba y mira ‹/›

Efecto después de ejecutar:

Bootstrap4 Cuadro emergente Bootstrap4 Cuadro de diálogo