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

163

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?

onejigtwojig
fuente
1
¿Puedes aceptar una respuesta? Esto ayudará a otros también.
MERose

Respuestas:

211

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; 
}
Valentin Despa
fuente
13
max-widthno funciona para mí, pero lo widthhace. Probado en Chrome e IE9. ¿Cualquier pista?
Rosdi Kasim
2
En mi caso, establecer tanto el ancho máximo como el ancho funcionó bien ya que .tooltip-inner era menor que el ancho máximo (200 px) aunque tenía muchos textos.
Nobu
Solo agregue! Importante como este funcionará ancho máximo: 350px! Importante;
Sohail Anwar
1
Para cualquier persona que todavía tenga problemas max-widthy no vea la respuesta de @ knobli a continuación, úsela data-container="body"en su elemento HTML.
kips15
Modificar el CSS debería ser el último recurso. Jquery proporciona funcionalidad para alterar la apariencia de la información sobre herramientas, ¿por qué no usarla?
E10
42

En BS3

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

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;
    }
}
LOTUSMS
fuente
23

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.

nglinh
fuente
2
Solo por curiosidad, ¿hay alguna razón en particular por la que definiste el estilo primordial como 'div [class = "tooltip-inner"]' y no tan simple como 'div.tooltip-inner'?
slawek
66
Escribí ese código cuando era muy nuevo en CSS, por lo tanto, no puedo recordar qué razón ridícula me hizo escribirlo de esa manera jaja
nglinh
21

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();
knobli
fuente
18
data-container="body"solo lo hizo por mí. ¡Gracias!
Izhaki
17

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/

戈 晓伟
fuente
44
La mejor respuesta en mi opinión porque no incluye cambiar CSS de arranque.
Tim Scarborough
1
Esta es la mejor respuesta para mí, pero no responde a la pregunta
Bengala
Esta es la mejor solución, creo. Utiliza la configuración de información sobre herramientas en lugar de la anulación de CSS Bootstrap.
César León
Esta es por FAAAR la mejor respuesta. Jquery proporciona funcionalidad para hacer todo tipo de cosas en la información sobre herramientas, entonces, ¿por qué no usarlo? Modificar el CSS debería ser el último recurso.
E10
10

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.

Son
fuente
2
Gran solución porque puedes elegir qué información sobre herramientas quieres usar.
Will Schoenberger
1
En bootstrap 4, la información sobre herramientas se agrega al cuerpo. Sin embargo, con data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"y .tooltip-wide { max-width: 100%; min-width: 80%; }uno puede hacer que funcione.
Matteo Ferla
Este es el primer ejemplo de la vida real que he visto al usar plantillas con información sobre herramientas BS4. Buena demostración y facilidad para agregar clases personalizadas también.
klewis
8

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.

onejigtwojig
fuente
¡Esto es genial para ajustar el ancho! ¡Gracias! ¡Esto junto con la respuesta anterior es la solución completa!
ATSiem
66
Como dijo @nglinh: "No es realmente recomendable". No desea realizar un seguimiento de todos sus hacks al actualizar bootstrap.
Valentin Despa
7

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 */ 
}
Xerus
fuente
6

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.

Anson
fuente
4

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;
}
Júnior
fuente
¿No debería ser de ancho mínimo?
Rippo
4

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

Rajasekar Kalisamy
fuente
2

BS3:

.tooltip-inner { width:400px; max-width: 400px; }
Hasta Hess
fuente
2

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>
Vincent Decaux
fuente
1

Prueba este código,

.tooltip-inner {
     max-width:350px !important;
}
Ragas Lamir
fuente
1

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 &nbsp;en cada línea de texto.

Ignas
fuente
1

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." />
Julesezaar
fuente
0

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;
}
Daniel
fuente
Esto crea caos con la alineación de la información sobre herramientas.
Ben
0

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%;
}
shaun
fuente
0

Con Bootstrap 4 yo uso

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

en bootstrap 3.0.3 puedes hacerlo modificando la clase popover

.popover {
    min-width: 200px;
    max-width: 400px;
}
Ekim
fuente
3
La clase .popover no se aplica a la información sobre herramientas.
Adriaan Tijsseling