Comment puis-je gracieusement développer une INTERFACE utilisateur de jQuery tooltip?

J'ai la page ci-dessous:

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

J'ai essayé plusieurs permutations sur la classe CSS, et son comportement est d'afficher un fond jaune, passez à une largeur plus large, comme souhaité, mais sans le noir et blanc zone frontalière également pris de l'expansion,--si l'info-bulle plane avec le contenu qui déborde la limite droite, non pas comme souhaité.

Comment puis-je demander une boîte contenant pour s'adapter à la 800px intérieure div contenant?

Merci,

OriginalL'auteur JonathanHayward | 2013-05-15

  1. 7

    Ici, vous êtes à l'application d'un 800px de largeur à votre contenu, MAIS, le .ui-tooltip classe est définie avec une max-width:300px; dans le jqueryui fichier css.
    Votre width: 800px; n'a aucun effet.

    Vous devez vous séparer de vos classes et de remplacer les max-width :

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

    Ne pas écraser ui-corner, ui-widget... ou d'autres classes. Vous pourriez en avoir besoin plus tard. Juste modifier le ui-tooltip qui est en cause ici ;).

    Je vous remercie. J'ai changé le max-width ".ui-tooltip, .ui-widget .ui-corner-all .ui-widget-content" d'avoir un width et max-largeur de 800px !important (avec et sans). L'info-bulle ne s'affiche pas comme tout grand. Je sais que c'est possible parce que jQuery tooltips sont plus larges sur l'utilisation de la souris au cours d'une recherche sur cjsh.nom/?query=test . Mais j'ai vécu et a supprimé la limitation du thème, et il est afficher à l'intention de la largeur. Merci!
    Étrange, je l'ai fait dans un jsfiddle, a bien fonctionné. Attention si vous souhaitez mettre à jour JQueryUI, n'oubliez pas de retirer la limitation de nouveau ! jsfiddle.net/TCHdevlp/aT4XK

    OriginalL'auteur TCHdvlp