<html>
<head>
<title>Trivandrum Diaries</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/get-shit-done.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gsdk-checkbox.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gsdk-morphing.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gsdk-radio.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.flexisel.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tagsinput.js" type="text/javascript" charset="utf-8"></script>
<script src="js/controls.js" type="text/javascript" charset="utf-8"></script>
<script src="js/chartist.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="https://use.fontawesome.com/11c5094818.js"></script>
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/gsdk.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/pe-icon-7-stroke.css" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-ct-azure navbar-transparent navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button id="menu-toggle" type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</button>
<a class="navbar-brand" href="#">Trivandrum Diaries</a>
</div>
<div class="collapse navbar-collapse" data-nav-image='assets/img/blog_1.png'>
<ul class="nav navbar-nav">
<li class="btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-trigger="manual"><a href="#"><i class="fa fa-2x fa-home" aria-hidden="true"></i></a>
</li>
<li><a href="#"><i class="fa fa-2x fa-calendar" aria-hidden="true"></i></a>
</li>
<li><a href="#"><i class="fa fa-2x fa-newspaper-o" aria-hidden="true"></i></a>
</li>
<li><a href="#"><i class="fa fa-2x fa-tags" aria-hidden="true"></i></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Discover</a>
</li>
<li><a href="#">Stats</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
这是我的代码，但我的工具提示显示的是Tool Top Shows like this下方的图片。
我使用的是bootstrap 3，主题是gsdk（Get Sh * t Done Kit）。 如果有人可以帮助我，那将是非常值得注意的。
答案 0 :(得分：0)
定位工具提示
默认情况下，工具提示将显示在元素的顶部。
使用data-placement属性设置元素顶部，底部，左侧或右侧的工具提示位置：
以下示例： -
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
</body>
</html>
另一种方法很简单Tooltip by css3
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>