Jak zmienić szerokość i wysokość podpowiedzi Twitter Bootstrap?

Stworzyłem podpowiedź za pomocą Twitter Bootstrap.

Etykietka jest wyświetlana w postaci trzech linii. Chciałbym jednak wyświetlić podpowiedź z tylko jedną linią.

Jak zmienić szerokość podpowiedzi? Czy jest to specyficzne dla Twitter Bootstrap, czy dla samych podpowiedzi?

Po prostu zastąp plik bootstrap.css

Domyślna wartość w BS2 to max-width: 200px; Możesz więc zwiększyć go o wszystko, co odpowiada Twoim potrzebom.

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

Na BS3

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

Zdaję sobie sprawę, że to bardzo stare pytanie, ale jeśli tu wylądowałem, inni też. Więc pomyślałem, że ważę.

Jeśli chcesz, aby podpowiedź reagowała tylko na jedną linię, niezależnie od ilości dodanej do niej treści, szerokość musi być elastyczna. Jednak Bootstrap inicjuje podpowiedź do szerokości, więc musisz przynajmniej zadeklarować, jaka będzie ta szerokość i uczynić ją elastyczną od tego rozmiaru w górę. Oto, co polecam:

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

min-widthDeklaruje wielkość wyjściową. W przeciwieństwie do max-width, jak sugerowałby ktoś inny, która deklaruje szerokość hamowania . Zgodnie z Twoim pytaniem, nie powinieneś deklarować ostatecznej szerokości, bo w tym momencie treść podpowiedzi ostatecznie zawinie się. Zamiast tego używasz nieskończonej szerokości lub elastycznej szerokości.max-width: 100%;zapewni, że po zainicjowaniu podpowiedzi o szerokości 100 pikseli, będzie się ona powiększać i dostosowywać do treści, niezależnie od ilości zawartości, jaką w niej masz.

PAMIĘTAJ Podpowiedzi nie są przeznaczone do przenoszenia dużej ilości treści. Mogłoby to wyglądać fajnie, gdybyś miał długi ciąg na całym ekranie. I na pewno będzie to miało wpływ na Twoje responsywne widoki, szczególnie w smartfonie (szerokość 320px).

Poleciłbym dwa rozwiązania, aby to udoskonalić:

1. Ogranicz zawartość podpowiedzi do minimum, aby szerokość nie przekraczała 320 pikseli. A nawet jeśli to zrobisz, pamiętaj, czy masz podpowiedź umieszczoną po prawej stronie ekranu i za pomocądata-placement:right , treść podpowiedzi nie będzie widoczna na smartfonach (stąd dlaczego początkowo bootstrap zaprojektował je tak, aby reagowały na jej zawartość i pozwalały na to owinąć)
2. Jeśli nie możesz się doczekać wykorzystania tej koncepcji podpowiedzi w jednym wierszu, omów swoje sześć, używając @mediazapytania, aby zresetować etykietkę, aby dopasować ją do widoku smartfona. Lubię to:

Moje demo TUTAJ demonstruje elastyczność i szybkość reakcji w podpowiedziach w zależności od rozmiaru zawartości i rozmiaru wyświetlacza urządzenia

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

Właściwości należy nadpisać własnym css. tak:

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

selektor wybiera div, w którym znajduje się podpowiedź (podpowiedź jest dodawana przez javascript i zwykle nie należy do żadnego kontenera).

Zdefiniuj maksymalną szerokość za pomocą „ważne!” i użyj data-container = "body"

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

Skrypt JS

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

Aby rozwiązać problem z szerokością, użyj następującego kodu.

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

przykład: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

Inne rozwiązanie; utwórz nową klasę (np. dla całej podpowiedzi) w CSS:

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

Użyj tej klasy na elementach, w których chcesz mieć szerokie etykiety narzędzi:

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

Etykietka narzędzia Bootstrap generuje znaczniki poniżej elementu zawierającego etykietkę, więc kod HTML po wygenerowaniu znacznika wygląda mniej więcej tak:

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

CSS używa tego, aby uzyskać dostęp do sąsiedniego elementu (+) do .tooltip-wide, a stamtąd przechodzi do .tooltip-inner, przed zastosowaniem atrybutu max-width. Wpłynie to tylko na elementy wykorzystujące klasę .tooltip, wszystkie inne podpowiedzi pozostaną niezmienione.

Możesz edytować klasę css .tooltip-inner w pliku bootstrap.css. Domyślna maksymalna szerokość to 200 pikseli. Możesz zmienić maksymalną szerokość na żądany rozmiar.

po kilku eksperymentach to zadziałało najlepiej:

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

Po prostu zastąp wartość domyślną taką, max-widthktóra odpowiada Twoim potrzebom.

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

Kiedy max-width nie działa (opcja 1)

Jeśli max-width nie działa, możesz zamiast tego użyć ustawionej szerokości. To jest w porządku, ale Twoje podpowiedzi nie będą już zmieniać rozmiaru, aby dopasować się do tekstu. Jeśli ci się to nie podoba, przejdź do opcji 2.

.tooltip-inner {
  width: 350px;
}

Prawidłowe postępowanie z małymi pojemnikami (opcja 2)

Ponieważ Bootstrap dołącza podpowiedź jako element siostrzany celu, jest on ograniczony przez element zawierający. Jeśli element zawierający jest mniejszy niż twój max-width, to max-widthnie zadziała.

Więc jeśli max-widthnie działa, wystarczy zmienić container:

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

Wskazówka dla profesjonalistów: kontenerem może być dowolny selektor, co jest przydatne, gdy chcesz zastąpić style tylko w kilku podpowiedziach.

Ustaw klasę jako główny element div podpowiedzi i wewnętrzną podpowiedź

div.tooltip {
    width: 270px;
}

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

Proszę zapoznać się z poniższym postem. Odpowiedź cmcculloh zadziałała dla mnie. https://stackoverflow.com/posts/31683500/edit

Jak wskazano w dokumentacji , najłatwiejszym sposobem upewnienia się, że podpowiedź w ogóle się nie zawija, jest użycie

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

Dzięki temu nie musisz się martwić o wartości wymiarów ani o nic podobnego. Główny problem polega na tym, że jeśli masz bardzo długą linię tekstu, po prostu zniknie z ekranu (jak widać w pliku przykładzie JSBin ).

BS3:

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

W Bootstrap 4 i jeśli nie chcesz zmieniać szerokości wszystkich podpowiedzi, możesz użyć określonego szablonu dla żądanej podpowiedzi:

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

Wypróbuj ten kod,

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

Miałem ten sam problem, ale wszystkie popularne odpowiedzi - zmiana .tooltip-inner{width}na moje zadanie nie wykonała zadania dobrze. Jeśli chodzi o inne (tj. Krótsze) podpowiedzi, stała szerokość była za duża. Byłem leniwy, pisząc osobne szablony / klasy html dla zilionów podpowiedzi, więc po prostu zastąpiłem wszystkie spacje między słowami  w każdym wierszu tekstu.

Musiałem dostosować szerokość niektórych podpowiedzi. Ale nie jest to ogólne ustawienie. Więc skończyło się na tym:

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

Ustawienie max-width of class tooltip-inner nie działało dla mnie , używam bootstrap 3.2

Niektóre, jak ustawienie max-width działa tylko wtedy, gdy ustawisz szerokość klasy nadrzędnej (.tooltip).

Ale wtedy wszystkie podpowiedzi osiągną określony rozmiar. Oto moje rozwiązanie:

dodaj Width do klasy nadrzędnej:

.tooltip {
  width:400px;
}

Następnie dodajesz max-width i zmieniasz wyświetlanie na inline-block, aby nie zajmował całej przestrzeni

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

Mój, w którym wszystkie zmienne długości i ustawiona maksymalna szerokość nie działałyby dla mnie, więc ustawienie mojego css na 100% działało jak urok.

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

Z Bootstrap 4 używam

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

w bootstrap 3.0.3 możesz to zrobić, modyfikując klasę popover

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