web-dev-qa-db-fra.com

Largeur du widget Info-bulle de l'interface utilisateur jQuery

J'utilise le nouveau info-bulle de jQuery UI et je n'arrive pas à comprendre comment définir une largeur maximale pour l'info-bulle. Je suppose que cela devrait être fait avec position, mais comment?

jquery-uijquery-ui-tooltip
19
sl3dg3

Sur la base de la réponse de Senn, j'ai ajouté ce qui suit dans un fichier CSS séparé:

div.ui-tooltip {
    max-width: 400px;
}

Sidenote: Assurez-vous que votre CSS séparé suit après le ui-css, sinon il n'y aura aucun effet. Sinon, vous pouvez également utiliser le marqueur !important -.

44
sl3dg3

Si vous vous abonnez à l'événement ouvert Tooltip, vous pouvez mettre à jour le style dans le code:

$(".selector").tooltip({
    open: function (event, ui) {
        ui.tooltip.css("max-width", "400px");
    }
});
30
KJR

dans le script:

$(Elm).tooltip({tooltipClass: "my-tooltip-styling" });

en css:

.my-tooltip-styling {
      max-width: 600px;
}
11
AnViKo

Au lieu de modifier ou de remplacer directement les classes CSS de l'interface utilisateur jQuery, vous pouvez spécifier une classe CSS supplémentaire à l'aide du paramètre tooltipClass :

Initialisation infobulle 

  $(function() {
    $( document ).tooltip({
      items: "tr.dataRow",
      tooltipClass: "toolTipDetails",  //This param here is used to define the extra style class 
      content: function() {
        var element = $( this );

            var details = j$("#test").clone();
            return details.html();

      }
    });
  });

Ensuite, vous créez cette classe de style. Vous voudrez importer ce fichier CSS après le fichier CSS de jQuery UI.

Exemple de style CSS

Cette classe créerait ici la largeur de 1200px modale par défaut et ajouterait un défilement horizontal s'il y avait plus de contenu au-delà.

<style> 
  .toolTipDetails {
    width:  1200px;
    max-width: 1200px;
    overflow:auto;
  } 

</style>

Sidenote: Il n'est généralement pas recommandé d'utiliser la balise !important mais elle pourrait être utilisée dans ce cas pour s'assurer que la variable CSS prévue est rendue. 

5
anataliocs

Comme indiqué par le jQuery UI api , le mieux que vous puissiez faire est de remplacer les classes ui-tooltip et ui-tooltip-content de cette façon:

.ui-tooltip
{
    /* tooltip container box */
    max-width: your value !important;
}
.ui-tooltip-content
{
    /* tooltip content */
    max-width: your value !important;
}

J'espère que cela t'aides!

3
Gonza Oviedo

Peut-être que vous pouvez définir la largeur comme ceci dans le js

$("#IDOfToolTip").attr("style", "max-width:30px");

ou 

$("#IDOfToolTip").css("max-width", "30px");
2
Senni
  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }
0
tonton polak