2012-10-04 67 views
0

我已經包含了bootstrap-twipsy.js 1.3.0,並且從我的網站上的bootstrap.css複製了twipsy的css。但孿生的影響是行不通的。當我包含bootstrap.css時,twipsy正常工作。我只需要twipsy的css,而不是bootstrap的css。這裏的CSS:只需要bootstrap的twipsy需要什麼? (class/id應該包含在bootstrap.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/

回答

0

你在某些方面錯過了最重要的CSS屬性使用不透明

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

工作撥弄顯示/隱藏部分這個CSS增加了:http://jsfiddle.net/4Fz5T/1/

當你移動鼠標時,工具提示會被預先添加到body中,並且它會得到class =「twipsy fade in」The ge在工具提示的隱藏功能中刪除,使其不可見(不透明度= 0)。請注意,它不會從DOM中刪除元素。