Question

我使用数据切换为文本添加了工具提示。工具提示显示但没有应用任何样式。我正在使用一个名为popper.js的JS库。

我是JS新手，所以我只是按照一个例子复制粘贴代码和库，它在我的第一个链接工具提示（邮件），但第二个链接（单词javascript）不显示工具提示的样式

这是我使用https://www.quackit.com/html/html_editors/scratchpad/?example=/bootstrap/bootstrap_4/tutorial/bootstrap_4_tooltips_buttons

的例子

我附上了截屏tooltip displaying correctly tooltip displaying wrong

以下是代码：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


		<script type="text/javascript">
		$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
		});
		</script>
		
	</head>
	<body>
	
		
		<div id="center">
			<div class="intro-header">
					<div class="container">
						<div class="row">
							<div class="col-lg-12">
								<h1>first text</h1>
								<!--line-->
								<hr class="line2" align="center" width="80%">
							</div>
							<div class="contact">
								<span class="script">second text</span>
								<span class="sans-serif">
								<a href="mailto:hello@randomood.com?Subject=Hello" data-toggle="tooltip" title="Say Hi!" data-placement="bottom" class="no-style" 
								target="_top">hello@randomood.com</a>
                <div class="skills-box">
								<span class="sans-serif">skills <br> other <a href="#" data-togle="tooltip" title="currently learning" data-placement="bottom" class="no-stylex"> JavaScript</a> </span>
								
							</div>
								
								</span>
							</div>

							
							
						</div>
					</div>
			</div>	
		</div>


		

		
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<!-- Popper -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>


		<!-- Initialize Bootstrap functionality -->
		<script>
		// Initialize tooltip component
		$(function () {
		  $('[data-toggle="tooltip"]').tooltip()
		})

		// Initialize popover component
		$(function () {
		  $('[data-toggle="popover"]').popover()
		})
		</script>

	</body>

Tooltip Bootstrap 4不会显示默认样式

0 个答案: