How can I gracefully expand a jQuery UI tooltip?

jquery jquery-ui hover jquery-ui-tooltip

14,172

Here you are applying a 800px width to your content, BUT, the .ui-tooltip class is defined with a max-width:300px; in the jqueryui css file. Your width: 800px; has no effect.

You must seperate your classes and override the max-width :

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

Don't overwrite ui-corner, ui-widget... or other classes. You may need them later. Just modify the ui-tooltip that is concerned here ;).

14,172

Author by

Christos Hayward

Jonathan Hayward is a recovering geek. He holds master's degrees bridging math and computer science (UIUC) and philosophy and theology (Cambridge), and is considered to be in the profoundly gifted range. He is presently learning Node and Russian. Read full biography—it's interesting.

Updated on June 14, 2022

Comments

Christos Hayward about 2 years

I have the page below:

<!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>

I have tried several permutations on the CSS class, and its present behavior is to display a yellow background hover at a wider width, as desired, but without the black and white border area also being expanded--so the tooltip hovers with the contents spilling over the right boundary--not as desired.

How can I ask for the containing box to fit the 800px inner containing div?

Thanks,