什么只需要bootstrap的twipsy？ （应该包含在bootstrap.css中的类/ id？）

Question

我已经在我的网站上包含bootstrap-twipsy.js 1.3.0并从bootstrap.css复制了twipsy的css。但twipsy的效果是行不通的。当我包含bootstrap.css时，twipsy工作正常。我只需要twipsy的css，而不是bootstrap的CSS。这是css：

.twipsy {
  display: block;
  position: absolute;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  z-index: 1000;
  filter: alpha(opacity=80);
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.twipsy.fade.in {
  filter: alpha(opacity=80);
  -khtml-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.twipsy.above .twipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
}
.twipsy.left .twipsy-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000000;
}
.twipsy.below .twipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000000;
}
.twipsy-inner {
  padding: 3px 8px;
  background-color: #000000;
  color: white;
  text-align: center;
  max-width: 200px;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.twipsy-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

和小提琴：http://jsfiddle.net/FArIZzX77/4Fz5T/

Answer 1

您在某些方面错过了使用不透明度显示/隐藏部分最重要的CSS属性

.fade {
    -moz-transition: opacity 0.15s linear 0s;
    opacity: 0;
}
.fade.in {
    opacity: 1;
}​

添加了这个CSS的工作小提琴：http://jsfiddle.net/4Fz5T/1/

当您移动鼠标时，工具提示会被添加到正文中，并且它会获得class =“twipsy fade in”。工具提示的隐藏功能会将其删除，使其不可见（opacity = 0）。请注意，它不会从DOM中删除元素。