如何优雅地扩展 jQuery UI 工具提示？答案

【问题标题】：How can I gracefully expand a jQuery UI tooltip?如何优雅地扩展 jQuery UI 工具提示？
【发布时间】：2013-05-15 12:30:52
【问题描述】：

我有以下页面：

<!DOCTYPE html>
<html>
    <head>
        <title>The Divine Liturgy</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            body
                {
                font-family: Verdana, Arial, sans;
                }
            .ui-tooltip, .ui-widget, .ui-corner-all, .ui-widget-content,
            .ui-tooltip-content
                {
                background-color: #ffff00;
                width: 800px;
                }
        </style>
        <link rel='stylesheet' type='text/css'
        href='/js/jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.css'
        />
    </head>
    <body>

<p title="Bless, Master!">Deacon: Blagoslavie, Vladyko!</p>

<p title="Blessed is the Kingdom of the Father, and of the Son, and of the Holy Spirit: Now and ever, and unto the ages of ages.">Priest: Blagoslovenno tsarsvo Otsa i Sina, i Svatago Duha, nine e presno, i vo beki vekov.</p>

<p title="Christ is risen from the dead, trampling down death by death, and on those in the tombs bestowing life!">Clergy: Hristos voskrece iz mertvih, smertyio smert poprav, i sushim vo grodex zhevot darovav!</p>


        <script src='/js/vendor/jquery-1.8.2-min.js'></script>

        <script
        src='/js/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js'></script>
        <script>
            jQuery(document).tooltip();
        </script>
    </body>
</html>

我在 CSS 类上尝试了几种排列方式，它目前的行为是根据需要在更宽的宽度上显示黄色背景悬停，但不会扩展黑白边框区域 - 所以工具提示会悬停在内容溢出右边界——不是我们想要的。

如何要求包含框适合 800px 内部包含 div？

谢谢，

【问题讨论】：

标签： jquery jquery-ui hover jquery-ui-tooltip

【解决方案1】：

在这里，您将 800px 宽度应用于您的内容，但是，.ui-tooltip 类在 jqueryui css 文件中使用max-width:300px; 定义。您的width: 800px; 无效。

你必须分开你的类并覆盖max-width：

body
            {
            font-family: Verdana, Arial, sans;
            }
        .ui-tooltip{
            max-width: 800px;
            width: 800px;
            }
        .ui-tooltip-content{
            background-color: #ffff00;
            }

不要覆盖ui-corner、ui-widget...或其他类。您以后可能需要它们。只需修改此处关注的ui-tooltip ;)。

【讨论】：

谢谢。我覆盖了“.ui-tooltip、.ui-widget、.ui-corner-all、.ui-widget-content”的最大宽度，使其宽度和最大宽度为 800 像素！重要（有和没有）。工具提示没有显示为更大。我知道这是可能的，因为 jQuery 工具提示在搜索 cjsh.name/?query=test 时更宽。但是我已经完成并删除了主题的限制，并且它以预期的宽度显示。谢谢！
奇怪，我是在 jsfiddle 中完成的，效果很好。如果要更新 JQueryUI，请小心，不要忘记再次删除限制！ jsfiddle.net/TCHdevlp/aT4XK