0
Dies ist mein Code, aber es wird nicht funktionieren.Bootstrap 4 Popover mit HTML-Inhalt
Wenn ich den nativen Bootstrap PopOver mit HTML in seinem Inhalt verwende, zeigt das Frontend diesen PopOver nicht an und die HTML-Quelle ist falsch formatiert.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<style>
.popover{
color: #757575 !important;
}
</style>
</head>
<body>
<div class="container">
<span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span>
</div>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>Remove Class-Eigenschaft. Es kann funktionieren.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<style>
.popover{
color: #757575 !important;
}
</style>
</head>
<body>
<div class="container">
<span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span>
</div>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>Ich versuche HTML in einem Bootstrap popover anzuzeigen, aber es ist irgendwie nicht funktioniert. Ich habe hier einige Antworten gefunden, aber es wird nicht funktionieren. Bitte lassen Sie mich wissen, wenn ich etwas falsch mache.