0

ツールチップに何も設定されていない場合でも、qTip がマージンを追加するのはなぜですか?

私が使用しているqTip構成は次のとおりです。

$.fn.qtip.styles.mystyle = { 
               width: 200,
               background: '#b7d5f4',
               color: '#212121',
               textAlign: 'left',
               border: {
                  width: 1,
                  radius: 5,
                  color: '#b7d5f4'
               },
               tip: 'bottomLeft',
               name: 'dark'
            }

            $.each($(".tooltip"), function(i,val){
                var theContent = $(val).html();
                $(val).qtip({
                     content: theContent,
                     position: {
                              corner: {
                                 target: 'topRight',
                                 tooltip: 'bottomLeft'
                              }
                           },
                     style: 'mystyle'
             });
});

コンテンツ div のクラス スタイルは次のようになります。

.ttContent
{
    width:                  200px;
    margin-left:           -8px;
    margin-top:            -15px;
}

ここで適切なマージンを得るために負のマージンを使用する必要があるのはなぜですか?

4

1 に答える 1

2

どうぞ： 

$.fn.qtip.styles.mystyle = {
    /*width: 200,*/
    background: '#b7d5f4',
    color: '#212121',
    textAlign: 'left',
    padding: 2,
    border: {
        width: 1,
        radius: 5,
        color: '#b7d5f4'
    },
    tip: 'bottomLeft',
    name: 'dark'
}

$.each($(".tooltip"), function(i, val) {

    var theContent = $(val).html();
    $(val).qtip({
        content: theContent,
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        },
        style: 'mystyle'
    });
});

非改行スペース、qtip 幅 (コンテンツ幅に拡張するため) を削除し、小さなパディングを適用しました。

実用的な例。

于 2011-03-13T20:39:06.047 に答える