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

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?

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

No BS3

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

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

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.

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

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/

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.

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.

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 */ 
}

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.

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

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

BS3:

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

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>

Experimente este código,

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

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  cada linha de texto.

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." />

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

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

Com o Bootstrap 4 eu uso

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

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

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