即使未设置,qTip 也会显示边距?

发布于 2024-10-21 17:34:17 字数 1136 浏览 4 评论 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;
}

为什么我必须使用负边距才能在此处获得适当的边距?

Why does qTip add a margin even when none is set for the tooltip?

Here's the qTip configuration I'm using:

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

The content div's class styles looks like this:

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

Why do I have to use negative margin to get proper margins here?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

桜花祭 2024-10-28 17:34:17

在这里:

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

一个有效的示例

Here you go:

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

I've removed the non-breaking spaces, the qtip width (to expand to the content width) and applied a smaller padding.

A working example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文