¿Cómo se cambia el ancho y la altura de la información sobre herramientas de Twitter Bootstrap?

Creé una información sobre herramientas usando Twitter Bootstrap.

La información sobre herramientas se muestra con tres líneas. Sin embargo, me gustaría mostrar la información sobre herramientas con una sola línea.

¿Cómo cambio el ancho de la información sobre herramientas? ¿Es esto específico de Twitter Bootstrap o de la información sobre herramientas?

Simplemente anule bootstrap.css

El valor predeterminado en BS2 es max-width: 200px; Para que pueda aumentarlo con lo que se adapte a sus necesidades.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}

En BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}

Me doy cuenta de que esta es una pregunta muy antigua, pero si aterrizo aquí, también lo harán otros. Entonces pensé que pesaba.

Si desea que la información sobre herramientas responda solo a una línea, independientemente de la cantidad de contenido que agregue, el ancho debe ser flexible. Sin embargo, Bootstrap inicia la información sobre herramientas en un ancho, por lo que al menos debe declarar cuál será ese ancho y hacerlo flexible a partir de ese tamaño en adelante. Esto es lo que recomiendo:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

El min-widthdeclara un tamaño inicial. A diferencia del ancho máximo, como sugeriría algún otro, que declara un ancho de detención . Según su pregunta, no debe declarar un ancho final o su contenido de información sobre herramientas eventualmente se ajustará en ese punto. En su lugar, utiliza un ancho infinito o ancho flexible. max-width: 100%;se asegurará de que una vez que la información sobre herramientas se haya iniciado a 100px de ancho, crecerá y se ajustará a su contenido, independientemente de la cantidad de contenido que tenga.

TENGA EN CUENTA La información sobre herramientas no está pensada para transportar mucho contenido. Podría parecer funky si tuviera una cadena larga en toda la pantalla. Y definitivamente tendrá un impacto en sus vistas receptivas, especialmente en teléfonos inteligentes (320px de ancho).

Recomendaría dos soluciones para perfeccionar esto:

1. Mantenga el contenido de la información sobre herramientas al mínimo para que no supere los 320 píxeles de ancho. E incluso si hace esto, debe recordar si tiene la información sobre herramientas colocada a la derecha de la pantalla y data-placement:right, con su contenido de información sobre herramientas, no será visible en los teléfonos inteligentes (de ahí que Bootstrap inicialmente los diseñó para responder a su contenido y permitir que envolver)
2. Si está empeñado en usar este concepto de información sobre herramientas de una línea, cubra sus seis mediante una @mediaconsulta para restablecer su información sobre herramientas para que se ajuste a la vista del teléfono inteligente. Me gusta esto:

Mi demo AQUÍ demuestra la flexibilidad y la capacidad de respuesta en la información sobre herramientas de acuerdo con el tamaño del contenido y el tamaño de visualización del dispositivo.

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}

Debe sobrescribir las propiedades con su propio CSS. al igual que:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

el selector elige el div en el que se encuentra la información sobre herramientas (la información sobre herramientas se agrega mediante javascript y, por lo general, no pertenece a ningún contenedor.

Defina el ancho máximo con "¡importante!" y use data-container = "body"

Archivo CSS

.tooltip-inner {
    max-width: 500px !important;
}

Etiqueta HTML

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

Script JS

$('.tooltiplink').tooltip();

Para solucionar el problema de ancho, use el siguiente código en su lugar.

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

ejemplo: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

Otra solución; cree una nueva clase (por ejemplo, toda la información sobre herramientas) en CSS:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

Use esta clase en elementos donde desee información sobre herramientas amplia:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

La información sobre herramientas de Bootstrap genera un marcado debajo del elemento que contiene la información sobre herramientas, por lo que el HTML realmente se ve así después de que se genera el marcado:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

El CSS usa esto para acceder al elemento adyacente (+) a .tooltip-wide, y desde allí navega a .tooltip-inner, antes de aplicar el atributo max-width. Esto solo afectará a los elementos que utilizan la clase .tooltip-wide, todas las demás informaciones sobre herramientas permanecerán inalteradas.

Puede editar la clase .tooltip-inner css en bootstrap.css. El ancho máximo predeterminado es 200px. Puede cambiar el ancho máximo al tamaño deseado.

después de experimentar un poco, esto funcionó mejor para mí:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}

Simplemente anule el valor predeterminado max-widthpara lo que se ajuste a sus necesidades.

.tooltip-inner {
  max-width: 350px;
}

Cuando max-width no funciona (opción 1)

Si max-width no funciona, puede usar un ancho establecido en su lugar. Esto está bien, pero la información sobre herramientas ya no cambiará de tamaño para ajustarse al texto. Si no le gusta, pase a la opción 2.

.tooltip-inner {
  width: 350px;
}

Tratar correctamente con contenedores pequeños (opción 2)

Dado que Bootstrap agrega la información sobre herramientas como un hermano del objetivo, el elemento contenedor lo limita. Si el elemento contenedor es más pequeño que tu max-width, entonces max-widthno funcionará.

Entonces, cuando max-widthno funciona, solo necesita cambiar container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Consejo profesional: el contenedor puede ser cualquier selector, lo cual es bueno cuando solo desea anular estilos en algunas sugerencias de herramientas.

Establezca la clase en el div de información sobre herramientas principal y para la información sobre herramientas interna

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}

Por favor, consulte la siguiente publicación. La respuesta de cmcculloh funcionó para mí. https://stackoverflow.com/posts/31683500/edit

Como se insinuó en la documentación , la forma más fácil de asegurarse de que su información sobre herramientas no se ajuste es utilizar

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

Con esto, no tiene que preocuparse por los valores de dimensión ni nada de eso. El principal problema es que si tiene una línea de texto súper larga, simplemente desaparecerá de la pantalla (como puede ver en el ejemplo de JSBin ).

BS3:

.tooltip-inner { width:400px; max-width: 400px; }

En Bootstrap 4, y si no desea cambiar el ancho de toda la información sobre herramientas, puede usar una plantilla específica para la información sobre herramientas que desee:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>

Prueba este código,

.tooltip-inner {
     max-width:350px !important;
}

Tuve el mismo problema, sin embargo, todas las respuestas populares: cambiar .tooltip-inner{width}para mi tarea no hizo el trabajo correctamente. En cuanto a otras informaciones sobre herramientas (es decir, más cortas), el ancho fijo era demasiado grande. Fui perezoso para escribir plantillas / clases html separadas para zilones de información sobre herramientas, así que simplemente reemplacé todos los espacios entre palabras  en cada línea de texto.

Necesitaba ajustar el ancho de algunas informaciones sobre herramientas. Pero no es un entorno general. Así que terminé haciendo esto:

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

HTML

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

Establecer el ancho máximo de class tooltip-inner no funcionó para mí , estoy usando bootstrap 3.2

De alguna manera, la configuración del ancho máximo solo funciona si establece el ancho de la clase principal (.tooltip).

Pero todas las informaciones sobre herramientas se convierten en el tamaño que especifique. Así que aquí está mi solución:

agregue un ancho a la clase padre:

.tooltip {
  width:400px;
}

Luego agrega el ancho máximo y cambia la pantalla a bloque en línea, para que no ocupe todo el espacio

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}

La mía donde todas las longitudes variables y un ancho máximo establecido no funcionarían para mí, por lo que configurar mi CSS al 100% funcionó de maravilla.

.tooltip-inner {
    max-width: 100%;
}

Con Bootstrap 4 yo uso

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

en bootstrap 3.0.3 puedes hacerlo modificando la clase popover

.popover {
    min-width: 200px;
    max-width: 400px;
}