Bunun çok eski bir soru olduğunun farkındayım, ama buraya indiğimde diğerleri de olacak. Bu yüzden tartıldığımı düşündüm.
Araç ipucunun, ona ne kadar içerik eklediğinizden bağımsız olarak yalnızca bir satıra yanıt vermesini istiyorsanız, genişliğin esnek olması gerekir. Bununla birlikte, Bootstrap araç ipucunu bir genişliğe başlatır, bu nedenle en azından bu genişliğin ne olacağını bildirmeniz ve onu bu boyuttan itibaren esnek hale getirmeniz gerekir. Ben tavsiye ederim:
.tooltip-inner {
min-width: 100px;
max-width: 100%;
}
min-widthBir başlangıç boyutunu bildirir. Maksimum genişliğin aksine, başkalarının önerebileceği gibi, bir durma genişliği bildirir . Sorunuza göre, son bir genişlik beyan etmemelisiniz, aksi takdirde araç ipucu içeriğiniz sonunda bu noktada sarılır. Bunun yerine, sonsuz genişlik veya esnek genişlik kullanırsınız.max-width: 100%;araç ipucu 100 piksel genişliğinde başlatıldığında, içeriğinizin içeriğinden bağımsız olarak büyümesini ve içeriğinize göre ayarlanmasını sağlar.
AKLINDA TUT
Araç ipuçları çok fazla içerik taşımak için tasarlanmamıştır. Tüm ekranda uzun bir dizeniz olsaydı korkak görünebilirdi. Ve özellikle akıllı telefonunuz (320 piksel genişlik), duyarlı görünümlerinizde kesinlikle bir etkisi olacaktır.
Bunu mükemmelleştirmek için iki çözüm öneriyorum:
- İpucu: 320 piksel genişliğini aşmayacak şekilde araç ipucu içeriğinizi minimumda tutun. Ve bunu yapsanız bile, ekranın sağında ve
data-placement:right ipucu içeriğiniz akıllı telefonlarda görünmeyecektir (bu nedenle bootstrap neden onları içeriğine duyarlı olacak şekilde tasarladı ve paketlemek)
- Bu tek satırlık araç ipucu kavramını kullanmak konusunda cehennem iseniz
@media, araç ipucunuzu akıllı telefon görünümüne sığdırmak için bir sorgu kullanarak altı tanenizi kapatın . Bunun gibi:
Benim demo BURAYA içerik boyutu ve cihaz ekran boyutu yanı göre araç ipuçları üzerinde esneklik ve yanıt gösteriyor
@media (max-width: 320px) {
.tooltip-inner {
min-width: initial;
width: 320px;
}
}