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

163

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?

onejigtwojig
źródło
1
Czy możesz przyjąć odpowiedź? Pomoże to również innym.
MERose

Odpowiedzi:

210

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; 
}
Valentin Despa
źródło
13
max-widthnie działa dla mnie, ale widthdziała. Przetestowano w Chrome i IE9. Jakaś wskazówka?
Rosdi Kasim
2
W moim przypadku ustawienie zarówno maksymalnej szerokości, jak i szerokości działało dobrze, ponieważ .tooltip-inner było mniejsze niż max-width (200px), chociaż zawierało dużo tekstów.
Nobu
Po prostu dodaj! Ważne w ten sposób, będzie działać max-width: 350px! Important;
Sohail Anwar,
1
Każdy, kto nadal ma problemy z max-widthodpowiedzią @ knobli i nie widzi jej poniżej, powinien użyć data-container="body"w swoim elemencie HTML.
kips15
Modyfikacja CSS powinna być ostatecznością. Jquery zapewnia funkcjonalność umożliwiającą zmianę wyglądu podpowiedzi, więc dlaczego jej nie użyć?
E10
42

Na BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}
Shina
źródło
28

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;
    }
}
LOTUSY
źródło
23

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

nglinh
źródło
2
Ciekawe, czy istnieje jakiś szczególny powód, dla którego nadpisujesz styl jako „div [class =" tooltip-inner "]”, a nie jako prosty „div.tooltip-inner”?
slawek
6
Napisałem ten kod, gdy byłem bardzo nowy w CSS, więc nie pamiętam, jaki absurdalny powód
skłonił
21

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();
knobli
źródło
18
data-container="body"sam to dla mnie zrobił. Dzięki!
Izhaki
17

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/

戈 晓伟
źródło
4
Moim zdaniem najlepsza odpowiedź, ponieważ nie obejmuje zmiany bootstrapowego CSS.
Tim Scarborough,
1
To najlepsza odpowiedź dla mnie, ale to nie odpowiada na pytanie
Bengala
Myślę, że to najlepsze rozwiązanie. Używa konfiguracji podpowiedzi zamiast przesłonięcia CSS Bootstrap.
César León
To najlepsza odpowiedź FAAAR. Jquery zapewnia funkcjonalność do robienia różnych rzeczy w podpowiedzi, więc dlaczego by jej nie użyć? Modyfikacja CSS powinna być ostatecznością.
E10
10

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.


źródło
2
Świetne rozwiązanie, ponieważ możesz wybrać, których podpowiedzi chcesz użyć.
Will Schoenberger
1
W bootstrap 4 podpowiedź jest dołączana do treści. Jednak z 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.
Matteo Ferla
To pierwszy prawdziwy przykład użycia szablonów z podpowiedziami BS4. Ładne demo i łatwość dodawania do niego niestandardowych klas.
klewis
8

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.

onejigtwojig
źródło
Świetnie nadaje się do regulacji szerokości! Dzięki! To wraz z powyższą odpowiedzią to pełne rozwiązanie!
ATSiem
6
Jak powiedział @nglinh: „To nie jest zalecane”. Nie chcesz śledzić wszystkich swoich hacków podczas aktualizacji bootstrapa.
Valentin Despa
7

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 */ 
}
Xerus
źródło
6

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.

Anson
źródło
4

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

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
Junior
źródło
Czy nie powinno to być min-width?
Rippo
4

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

Rajasekar Kalisamy
źródło
2

BS3:

.tooltip-inner { width:400px; max-width: 400px; }
Do Hessa
źródło
2

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>
Vincent Decaux
źródło
1

Wypróbuj ten kod,

.tooltip-inner {
     max-width:350px !important;
}
Ragas Lamir
źródło
1

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 &nbsp;w każdym wierszu tekstu.

Ignas
źródło
1

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." />
Julesezaar
źródło
0

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;
}
Daniel
źródło
Powoduje to chaos z wyrównaniem podpowiedzi.
Ben
0

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%;
}
shaun
źródło
0

Z Bootstrap 4 używam

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}
Wishmaster
źródło
-1

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

.popover {
    min-width: 200px;
    max-width: 400px;
}
Ekim
źródło
3
Klasa .popover nie ma zastosowania do podpowiedzi.
Adriaan Tijsseling