Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I gracefully expand a jQuery UI tooltip?

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,

like image 910
Christos Hayward Avatar asked Feb 16 '23 13:02

Christos Hayward


1 Answers

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 ;).

like image 187
TCHdvlp Avatar answered Feb 19 '23 02:02

TCHdvlp