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?
twitter-bootstrap
tooltip
onejigtwojig
źródło
źródło
Odpowiedzi:
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.
źródło
max-width
nie działa dla mnie, alewidth
działa. Przetestowano w Chrome i IE9. Jakaś wskazówka?max-width
odpowiedzią @ knobli i nie widzi jej poniżej, powinien użyćdata-container="body"
w swoim elemencie HTML.Na BS3
źródło
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:
min-width
Deklaruje 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ć:
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ąć)@media
zapytania, 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
źródło
Właściwości należy nadpisać własnym css. tak:
selektor wybiera div, w którym znajduje się podpowiedź (podpowiedź jest dodawana przez javascript i zwykle nie należy do żadnego kontenera).
źródło
Zdefiniuj maksymalną szerokość za pomocą „ważne!” i użyj data-container = "body"
Plik CSS
Tag HTML
Skrypt JS
źródło
data-container="body"
sam to dla mnie zrobił. Dzięki!Aby rozwiązać problem z szerokością, użyj następującego kodu.
przykład: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/
źródło
Inne rozwiązanie; utwórz nową klasę (np. dla całej podpowiedzi) w CSS:
Użyj tej klasy na elementach, w których chcesz mieć szerokie etykiety narzędzi:
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:
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.
źródło
data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"
i.tooltip-wide { max-width: 100%; min-width: 80%; }
można go zmusić do pracy.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.
źródło
po kilku eksperymentach to zadziałało najlepiej:
źródło
Po prostu zastąp wartość domyślną taką,
max-width
która odpowiada Twoim potrzebom.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.
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
, tomax-width
nie zadziała.Więc jeśli
max-width
nie działa, wystarczy zmienićcontainer
:Wskazówka dla profesjonalistów: kontenerem może być dowolny selektor, co jest przydatne, gdy chcesz zastąpić style tylko w kilku podpowiedziach.
źródło
Ustaw klasę jako główny element div podpowiedzi i wewnętrzną podpowiedź
źródło
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
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 ).
źródło
BS3:
źródło
W Bootstrap 4 i jeśli nie chcesz zmieniać szerokości wszystkich podpowiedzi, możesz użyć określonego szablonu dla żądanej podpowiedzi:
źródło
Wypróbuj ten kod,
źródło
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.źródło
Musiałem dostosować szerokość niektórych podpowiedzi. Ale nie jest to ogólne ustawienie. Więc skończyło się na tym:
CSS
JQuery
HTML
źródło
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:
Następnie dodajesz max-width i zmieniasz wyświetlanie na inline-block, aby nie zajmował całej przestrzeni
źródło
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.
źródło
Z Bootstrap 4 używam
źródło
w bootstrap 3.0.3 możesz to zrobić, modyfikując klasę popover
źródło