在元素上应用工具提示

Question

我有这个元素http://zag-test.nowcommu.myhostpoint.ch/，我想在顶部添加一个工具提示，当你用鼠标移动到单个"slice"上时。我试着用这个http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp但是什么也没发生。

HTML:

<div class="component">
            <!-- Start Nav Structure -->
            <button class="cn-button" id="cn-button"></button>
            <div class="cn-wrapper" id="cn-wrapper">
                <ul>
                    <li><a href="#" class="primo"><span>07.45 Uhr</span></a></li>
                    <li><a href="#" class="secondo"><span>07.55 Uhr</span></a></li>
                    <li><a href="#" class="terzo"><span>08.15 Uhr</span></a></li>
                    <li><a href="#" class="quarto"><span>08.17 Uhr</span></a></li>
                    <li><a href="#" class="quinti"><span>10.47 Uhr</span></a></li>
                    <li><a href="#" class="sesto"><span>13.20 Uhr</span></a></li>
                    <li><a href="#" class="settimo"><span>16.30 Uhr</span></a></li>
                 </ul>
            </div>
            <!-- End of Nav Structure -->
        </div>

CSS

.component {
position: relative;
margin-bottom: 2em;
height: 15em;
font-family: 'Lato', Arial, sans-serif;
transform: scale(1.1) !important;
margin-top: 90px; }
.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-top: -1.3em;
margin-left: -10em;
width: 10em;
height: 10em;
font-size: 1.5em;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(76deg) skew(60deg);
-moz-transform: rotate(76deg) skew(60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(76deg) skew(60deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
pointer-events: none;}
.csstransforms .cn-wrapper li a {
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
background: #000;
background: -webkit-radial-gradient(transparent 35%, #000 35%);
background: -moz-radial-gradient(transparent 35%, #000 35%);
background: radial-gradient(transparent 35%, #000 35%);
color: #f9d70a;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
-moz-transform: skew(-60deg) rotate(-75deg) scale(1);
-ms-transform: skew(-60deg) rotate(-75deg) scale(1);
transform: skew(-60deg) rotate(-75deg) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto; }
.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
background: -webkit-radial-gradient(transparent 35%, #f9d70a 35%);
background: -moz-radial-gradient(transparent 35%, #f9d70a 35%);
background: radial-gradient(transparent 35%, #f9d70a 35%);
color: #000; }
.csstransforms .cn-wrapper li a:focus {
position: fixed; /* fix the displacement bug in webkit browsers when     using tab key */
}
.csstransforms .opened-nav li {
-webkit-transition: all .3s ease .3s;
-moz-transition: all .3s ease .3s;
transition: all .3s ease .3s;
}
.csstransforms .opened-nav li:first-child {
-webkit-transform: rotate(-20deg) skew(60deg);
-moz-transform: rotate(-20deg) skew(60deg);
-ms-transform: rotate(-20deg) skew(60deg);
transform: rotate(-20deg) skew(60deg);
}
 .csstransforms .opened-nav li:nth-child(2) {
-webkit-transform: rotate(12deg) skew(60deg);
-moz-transform: rotate(12deg) skew(60deg);
-ms-transform: rotate(12deg) skew(60deg);
transform: rotate(12deg) skew(60deg);
}
.csstransforms .opened-nav  li:nth-child(3) {
-webkit-transform: rotate(44deg) skew(60deg);
-moz-transform: rotate(44deg) skew(60deg);
-ms-transform: rotate(44deg) skew(60deg);
transform: rotate(44deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(4) {
-webkit-transform: rotate(76deg) skew(60deg);
-moz-transform: rotate(76deg) skew(60deg);
-ms-transform: rotate(76deg) skew(60deg);
transform: rotate(76deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(5) {
-webkit-transform: rotate(108deg) skew(60deg);
-moz-transform: rotate(108deg) skew(60deg);
-ms-transform: rotate(108deg) skew(60deg);
transform: rotate(108deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(6) {
-webkit-transform: rotate(140deg) skew(60deg);
-moz-transform: rotate(140deg) skew(60deg);
-ms-transform: rotate(140deg) skew(60deg);
transform: rotate(140deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(7) {
-webkit-transform: rotate(172deg) skew(60deg);
-moz-transform: rotate(172deg) skew(60deg);
-ms-transform: rotate(172deg) skew(60deg);
transform: rotate(172deg) skew(60deg);
}
  .no-csstransforms .cn-wrapper {
   overflow: hidden;
  margin: 10em auto;
  padding: .5em;
  text-align: center;
  }
 .no-csstransforms .cn-wrapper ul {
  display: inline-block;
  }
 .no-csstransforms .cn-wrapper li {
 float: left;
 width: 5em;
 height: 5em;
 background-color: #fff;
 text-align: center;
 font-size: 1em;
 line-height: 5em;
 }
  ## Heading ## .no-csstransforms .cn-wrapper li a {
     display: block;
     width: 100%;
     height: 100%;
     color: inherit;
     text-decoration: none;
     }
 .no-csstransforms .cn-wrapper li a:hover,
 .no-csstransforms .cn-wrapper li a:active,
 .no-csstransforms .cn-wrapper li a:focus {
background-color: #f8f8f8;
}
.no-csstransforms .cn-wrapper li.active a{
background-color: #6F325C;
color: #fff;
}
  .no-csstransforms .cn-button {
   display: none;
  }

Answer 1

看看这个，这会有帮助的。

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a href="#" data-toggle="tooltip" title="Hooray!" data-placement="bottom">Hover over me</a>