Bootstrap4 Grund教程

Bootstrap4 Pop-up-Fenster Bootstrap4 Modalauswahl

Bootstrap4 Hinweisfenster

Ein Hinweisfenster ist ein kleines Pop-up-Fenster, das bei der Mausbewegung auf das Element angezeigt wird und verschwindet, wenn die Maus außerhalb des Elements bewegt wird.

Wie man ein Hinweisfenster erstellt

Durch Hinzufügen von data an das Element-toggle="tooltip" Komm und erstelle ein Hinweisfenster.

Der Inhalt der title-Eigenschaft ist der Inhalt des Hinweisfensters:

<a href="#" data-toggle="tooltip" title="Ich bin der Hinweisinhalt!">Mausbewegung auf mich</a>

Achtung: Das Hinweisfenster muss im jQuery-Initialisierungscode stehen: Dann wird das tooltip()-Verfahren auf dem angegebenen Element aufgerufen.

Nachfolgende Beispiele können überall im Dokument Hinweisfenster verwenden:

示例

<!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>Hinweisfensterbeispiel</h2><br>
　　<a href="#" data-toggle="tooltip" title="Ich bin der Hinweisinhalt!">Mausbewegung auf mich</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Nach dem Ausführen sieht es so aus:

Bestimmen Sie den Ort des Hinweisfensters

Standardmäßig wird das Hinweisfenster über dem Element angezeigt.

Es kann data verwendet werden-Die placement-Eigenschaft wird verwendet, um die Richtung der Anzeige des Hinweisfensters zu bestimmen: top, bottom, left oder 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>Hinweisfensterbeispiel</h2><br>
　　<a href="#" data-toggle="tooltip" data-placement="top" title="Ich bin der Hinweisinhalt!">Mausbewegung auf mich</a>
　　<a href="#" data-toggle="tooltip" data-placement="bottom" title="Ich bin der Hinweisinhalt!">Mausbewegung auf mich</a>
　　<a href="#" data-toggle="tooltip" data-placement="left" title="Ich bin der Tooltip-Text!">Maus über mir bewegen</a>
　　<a href="#" data-toggle="tooltip" data-placement="right" title="Ich bin der Tooltip-Text!">Maus über mir bewegen</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Nach dem Ausführen sieht es so aus:

In der Schaltfläche verwenden:

示例

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

Testen Sie es heraus ‹/›

Nach dem Ausführen sieht es so aus:

Hinweisinhalt mit HTML-Tags hinzufügen, data-html="true"，Inhalt in der title-Tag platziert:

示例

<!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>mit</u> <b>HTML</b>
　　Tooltip mit HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Testen Sie es heraus ‹/›

Nach dem Ausführen sieht es so aus:

禁用按钮：

示例

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

Testen Sie es heraus ‹/›

Nach dem Ausführen sieht es so aus:

Bootstrap4 Pop-up-Fenster Bootstrap4 Modalauswahl