0

我一直在我的网站上使用工具提示：

<a title="Help: jQuery UI's theme builder application">Help</a>

在 i .JS 中，我想使用位置和显示选项：

    $( document ).tooltip({     
    show: {
        effect: "slideDown",
        delay: 150,
        track: true
    }       
 });

$( 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 );
        }
    }
});

CSS：

.ui-tooltip, .arrow:after {
  background: #9FDAEE; 
  border: 1px solid #2BB0D7;
}
.ui-tooltip {
 margin-left: -999em;
 position: absolute;
 border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
 font-family: Calibri, Tahoma, Geneva, sans-serif;
 position: absolute; left: 1em; top: 2em; z-index: 99;
 margin-left: 0; width: 250px;
 font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
 display: block; padding: 0.2em 0 0.6em 0;
}
.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);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 tranform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}

我怎样才能一起使用这些？

另外，我目前正在使用slideDown功能，是否有“ slideRight ”版本？

谢谢

4

1 回答 1

2

//像这样尝试，希望它完全可以工作

$( document ).tooltip({     
    show: {
        effect: "slideDown",
        delay: 150,
        track: true
    },

    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 );
        }
    }       
 });
于 2013-07-12T11:48:49.817 回答