jquery - 即使未设置，qTip 也会显示边距？

Question

为什么即使没有为工具提示设置 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;
}

为什么我必须在这里使用负边距来获得适当的边距？

Answer 1

给你:

$.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 宽度(以扩展到内容宽度)并应用了较小的填充。

工作example .