Como você altera a largura e a altura das dicas do Twitter Bootstrap?

162

Criei uma dica de ferramenta usando o Twitter Bootstrap.

A dica de ferramenta é exibida com três linhas. No entanto, eu gostaria de exibir a dica de ferramenta com apenas uma linha.

Como altero a largura da dica de ferramenta? Isso é específico do Twitter Bootstrap ou das dicas de ferramentas?

onejigtwojig
fonte
1
Você pode talvez aceitar uma resposta? Isso ajudará outras pessoas também.
MERose 24/05

Respostas:

209

Apenas substitua o bootstrap.css

O valor padrão no BS2 é max-width: 200px; Assim, você pode aumentá-lo com o que for mais adequado às suas necessidades.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}
Valentin Despa
fonte
13
max-widthnão funciona para mim, mas widthfunciona. Testado no Chrome e IE9. Qualquer pista?
Rosdi Kasim
2
No meu caso, a configuração de largura e largura máximas funcionou bem, já que .tooltip-interior era menor que largura máxima (200px), embora houvesse muitos textos.
Nobu 22/01
Basta adicionar! Important como este, ele funcionará na largura máxima: 350 px! Important;
Sohail Anwar
1
Para quem ainda está com problemas max-widthe não vê a resposta do @ knobli abaixo, use data-container="body"seu elemento HTML.
kips15
Modificar o CSS deve ser o último recurso. O Jquery fornece funcionalidade para alterar a aparência da dica de ferramenta. Por que não usá-la?
E10
42

No BS3

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

Sei que essa é uma pergunta muito antiga, mas se eu cheguei aqui, os outros também. Então eu pensei em pesar.

Se você deseja que a dica de ferramenta responda apenas a uma linha, independentemente do conteúdo adicionado, a largura deve ser flexível. No entanto, o Bootstrap inicia a dica de ferramenta com uma largura; portanto, você precisa pelo menos declarar qual será essa largura e torná-la flexível a partir desse tamanho. Isto é o que eu recomendo:

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

O min-widthdeclara um tamanho inicial. Ao contrário da largura máxima, como alguns sugeririam, que declara uma largura de parada . De acordo com sua pergunta, você não deve declarar uma largura final, pois o conteúdo da dica da ferramenta acabará quebrando nesse ponto. Em vez disso, você usa uma largura infinita ou largura flexível. max-width: 100%;garantirá que, assim que a dica de ferramenta for iniciada com 100 px de largura, ela crescerá e se ajustará ao seu conteúdo, independentemente da quantidade de conteúdo que você possui.

KEEP IN MIND As dicas de ferramenta não têm a intenção de transportar muito conteúdo. Pode parecer estranho se você tiver uma longa corda na tela inteira. E definitivamente terá um impacto nas suas visualizações responsivas, especialmente em smartphones (largura de 320px).

Eu recomendaria duas soluções para aperfeiçoar isso:

  1. Mantenha o conteúdo da dica de ferramenta no mínimo, para não exceder 320 px de largura. E mesmo que você faça isso, lembre-se de ter a dica de ferramenta à direita da tela e comdata-placement:right , o conteúdo da dica de ferramenta não será visível nos smartphones (por isso, o bootstrap os projetou inicialmente para responder ao seu conteúdo e permitir que ele embrulho)
  2. Se você está empenhado em usar esse conceito de dica de ferramenta de uma linha, cubra os seis usando uma @mediaconsulta para redefinir sua dica de ferramenta para se ajustar à visualização do smartphone. Como isso:

Minha demonstração AQUI demonstra a flexibilidade e a capacidade de resposta nas dicas de ferramentas, de acordo com o tamanho do conteúdo e o tamanho da tela do dispositivo

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

Você deve substituir as propriedades usando seu próprio css. igual a:

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;
}

o seletor escolhe a div em que a dica de ferramenta é mantida (a dica de ferramenta é adicionada por javascript e geralmente não pertence a nenhum contêiner.

nglinh
fonte
2
Apenas curioso, existe alguma razão em particular pela qual você definiu o estilo de substituição como 'div [class = "tooltip-inner"]' e não tão simples 'div.tooltip-inner'?
slawek
6
Eu escrevi os códigos quando eu era muito novo para CSS, portanto, não me lembro qual motivo ridículo me fez escrever isso dessa maneira haha
nglinh
21

Defina a largura máxima com "importante!" e use data-container = "body"

Arquivo CSS

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

Tag 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
fonte
18
data-container="body"sozinho fez isso por mim. Obrigado!
Izhaki
17

Para corrigir o problema de largura, use o seguinte código.

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

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

戈 晓伟
fonte
4
Melhor resposta, na minha opinião, porque não inclui a alteração do CSS do bootstrap.
Tim Scarborough
1
Esta é a melhor resposta para mim, mas isso does't responder à pergunta
Bengala
Esta é a melhor solução que eu acho. Ele usa a configuração da dica de ferramenta em vez da substituição do CSS Bootstrap.
César León
Esta é a melhor resposta da FAAAR. O Jquery fornece funcionalidade para fazer todos os tipos de coisas na dica de ferramenta. Por que não usá-la? Modificar o CSS deve ser o último recurso.
E10
10

Outra solução; crie uma nova classe (por exemplo, em toda a dica de ferramenta) em CSS:

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

Use esta classe nos elementos em que deseja dicas de ferramentas amplas:

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

A dica de ferramenta do Bootstrap gera marcação abaixo do elemento que contém a dica de ferramenta, portanto, o HTML fica mais ou menos assim depois que a marcação é gerada:

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

O CSS usa isso para acessar o elemento adjacente (+) para .tooltip-wide e, a partir daí, navega para .tooltip-inner, antes de aplicar o atributo max-width. Isso afetará apenas os elementos que usam a classe .tooltip, todas as outras dicas de ferramentas permanecerão inalteradas.

Estão
fonte
2
Ótima solução, pois você pode escolher quais dicas de ferramentas deseja usar.
Will Schoenberger
1
No bootstrap 4, a dica de ferramenta é anexada ao corpo. No entanto, com data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"e .tooltip-wide { max-width: 100%; min-width: 80%; }pode-se fazê-lo funcionar.
Matteo Ferla
Este é o primeiro exemplo da vida real que eu já vi ao usar modelos com dicas de ferramentas BS4. Demonstração agradável e facilidade de adicionar classes personalizadas a ele também.
26419 klewis
8

Você pode editar a classe .tooltip-inner css em bootstrap.css. A largura máxima padrão é 200px. Você pode alterar a largura máxima para o tamanho desejado.

onejigtwojig
fonte
Isso é ótimo para ajustar a largura! Obrigado! Isso, juntamente com a resposta acima, é a solução completa!
ATSiem 15/05
6
Como o @nglinh disse: "Não é realmente recomendado". Você não deseja acompanhar todos os seus hacks ao atualizar o bootstrap.
Valentin Despa 27/05
7

depois de algumas experiências, funcionou melhor para mim:

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

Apenas substitua o padrão pelo max-widthque for adequado às suas necessidades.

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

Quando a largura máxima não funciona (opção 1)

Se a largura máxima não funcionar, você poderá usar uma largura definida. Tudo bem, mas suas dicas não serão mais redimensionadas para caber no texto. Se você não gostar disso, pule para a opção 2.

.tooltip-inner {
  width: 350px;
}

Lidar corretamente com pequenos contêineres (opção 2)

Como o Bootstrap anexa a dica de ferramenta como um irmão do destino, ela é restringida pelo elemento que a contém. Se o elemento que contiver for menor que o seu max-width, entãomax-width não funcionará.

Então, quando max-widthnão funciona, você só precisa alterar o container:

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

Dica profissional: o contêiner pode ser qualquer seletor, o que é bom quando você deseja substituir estilos apenas em algumas dicas de ferramentas.

Anson
fonte
4

Defina a classe para a div principal da dica de ferramenta e para a dica interna

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
Júnior
fonte
Não deve ter largura mínima?
Rippo
4

Consulte o post abaixo. A resposta de cmcculloh funcionou para mim. https://stackoverflow.com/posts/31683500/edit

Conforme sugerido na documentação , a maneira mais fácil de garantir que sua dica de ferramenta não seja encapsulada é usar

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

Com isso, você não precisa se preocupar com valores de dimensão ou algo assim. O principal problema é que, se você tiver uma linha de texto super longa, ela sairá da tela (como você pode ver no Exemplo JSBin ).

Rajasekar Kalisamy
fonte
2

BS3:

.tooltip-inner { width:400px; max-width: 400px; }
Até Hess
fonte
2

No Bootstrap 4, e se você não quiser alterar a largura de todas as dicas de ferramentas, poderá usar um modelo específico para a dica de ferramenta que deseja:

<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
fonte
1

Experimente este código,

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

Eu tive o mesmo problema, no entanto, todas as respostas populares - mudar .tooltip-inner{width}para minha tarefa falharam em fazer o trabalho corretamente. Quanto a outras dicas de ferramenta (ou seja, menores), a largura fixa era muito grande. Eu estava com preguiça de escrever modelos / classes html separados para zilhões de dicas de ferramentas, então substituí todos os espaços entre as palavras por &nbsp;cada linha de texto.

Ignas
fonte
1

Eu precisava ajustar a largura de algumas dicas de ferramentas. Mas não é uma configuração geral. Então acabei fazendo isso:

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
fonte
0

Definir a largura máxima da classe tooltip-inner não funcionou para mim , estou usando o bootstrap 3.2

De alguma forma , como a configuração de largura máxima só funciona se você definir a largura da classe pai (.tooltip).

Mas todas as dicas de ferramentas se tornam o tamanho que você especificar. Então aqui está a minha solução:

adicione uma largura à classe pai:

.tooltip {
  width:400px;
}

Em seguida, adicione a largura máxima e altere a exibição para bloco embutido, para que não ocupe todo o espaço

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}
Daniel
fonte
Isso cria caos com o alinhamento da dica de ferramenta.
Ben
0

O meu, onde todos os comprimentos variáveis ​​e uma largura máxima definida não funcionariam para mim, então definir meu css para 100% funcionou como um encanto.

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

Com o Bootstrap 4 eu uso

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

no bootstrap 3.0.3, você pode fazer isso modificando a classe popover

.popover {
    min-width: 200px;
    max-width: 400px;
}
Ekim
fonte
3
A classe .popover não se aplica a dicas de ferramentas.
Adriaan Tijsseling