[英]TooltipClass not working for jQuery UI
我指的是此問題的答案,以自定義工具提示div樣式,但尚未完成。 這是我的CSS:
<style type="text/css">
.ttExtra
{
background-color: Black !important;
color:Red !important;
}
</style>
和jQuery:
<script type="text/javascript">
$('.userdetails').tooltip({
tooltipSourceID: '#userprofile',
loader: 1,
//loaderImagePath: 'animationProcessing.gif',
//loaderHeight: 16,
//loaderWidth: 17,
width: '400px',
height: '200px',
tooltipSource: 'inline',
borderSize: '2',
borderColor :'#000000',
tooltipBGColor: '#efefef',
tooltipClass: 'ttExtra'
});
</script>
我在工具提示中看不到我在CSS類中提到的樣式。 這里一定有什么問題嗎?
謝謝。
要在jQuery UI中自定義工具提示(自定義樣式):
<a href="#" title="This is a tooltip">Tooltips</a>
<script>
$(function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
</script>
<style>
.ui-tooltip, .arrow:after {
background: #efefef;
color:red;
border:2px solid #000;
width: 400px;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.