jquery-ui - personalizado - tooltip plugins jquery

Ancho de jQuery UI Tooltip widget

Question

Utilizo la nueva información sobre Tooltip jQuery UI y tengo problemas para averiguar cómo configurar un ancho máximo de la información sobre herramientas. Supongo que debería hacerse con la posición , pero ¿cómo?

Answer 1

Como lo señala el jQuery UI api , lo mejor que puedes hacer es anular las clases ui-tooltip y ui-tooltip-content de esta manera:

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

¡Espero que esto ayude!

Answer 2

En lugar de modificar o anular las clases jQuery UI CSS directamente, puede especificar una clase CSS adicional usando el parámetro tooltipClass :

Inicialización de Tooltip

  $(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();

      }
    });
  });

Entonces crearías esa clase de estilo. Querrá importar este archivo CSS después del archivo jQuery UI CSS.

Ejemplo de estilo CSS

Esta clase aquí tendría el ancho modal de 1200 píxeles por defecto y agregaría un desplazamiento horizontal si hay más contenido más allá de eso.

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

</style>

Nota al margen: en general, no se recomienda usar la etiqueta !important pero se podría usar en este caso para garantizar que se procesa el CSS deseado.

Answer 3

Según la respuesta de Senn, agregué lo siguiente a un archivo CSS separado:

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

Una nota al margen: asegúrese de que su CSS por separado sigue después del ui-css, de lo contrario no habrá ningún efecto. De lo contrario, también podrías usar el marcador !important .

Answer 4

Si se suscribe al evento abierto de Tooltip, puede actualizar el estilo en el código:

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

Answer 5

Tal vez puedas establecer el ancho como este en el js

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

o

$("#IDOfToolTip").css("max-width", "30px");

Answer 6

en guión:

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

en css:

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

Answer 7

  .ui-tooltip{
      max-width: 800px !important;
      width: auto !important;
      overflow:auto !important;
      }
  .ui-tooltip-content{
      background-color: #fdf8ef;
      }