Nasıl düzgün css yüzer araç ipuçları (mutlak konumlandırılmış span) yapmak için metin yeniden boyutlandırmak için yeniden boyutlandırma

Question

Son zamanlarda, bir bağlantı üzerinde fare gezindiğinde, bir stil araç ipucu görüntülemek için CSS sözde sınıf :hover kullanma fikri vardı.

bağlantıdan temel kod şuna benzer:

.hasTooltip { 
 
    position:relative; 
 
} 
 
.hasTooltip span { 
 
    display:none; 
 
} 
 

 
.hasTooltip:hover span { 
 
    display:block; 
 
    background-color:black; 
 
    border-radius:5px; 
 
    color:white; 
 
    box-shadow:1px 1px 3px gray; 
 
    position:absolute; 
 
    padding:5px; 
 
    top:1.3em; 
 
    left:0px; 
 
    max-width:200px; /* I don't want the width to be too large... */ 
 
}

<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a>

The result is exactly what I want, ama bir can sıkıcı sorunla: açıklık metnini içerecek şekilde genişleyecektir etmez ve bunu yaparsam değil bir genişlik belirtin, metin ezilir.

Google'da arama yaptım, insanların yaptıkları işlerin bir kaç örneğini buldum (this example aldığımma benzer şekilde benzer), ancak hiçkimse sahip olduğum span genişlik sorununu ele almamış görünüyor.

Answer 1

Bu cevap geç derece olduğunu biliyorum, ama bu kullanmak olacaktır sorununuzla anahtarını görüntülenir: açıklığın içine

white-space: nowrap; 

ve genişliği her türlü kurtulmak tanım. Elbette bunun sakıncası, araç ipucunun sadece tek bir satırı destekleyebilmesi olacaktır. Çok satırlı bir çözüm istiyorsanız, büyük olasılıkla javascript kullanmanız gerekecektir. Bir bonusu eklendi http://jsbin.com/oxamez/1/edit

bu IE7 aşağı tüm yol çalışmasıdır: Burada

bu yöntemin bir örneğidir. IE7'yi desteklemeniz gerekmiyorsa, yayılma alanını ve img stillerini a: öncesi, ve: .tooltip için katlamayı öneririm. Ardından, data- * özniteliğini kullanarak metni doldurabilirsiniz.

Answer 2

saf CSS ile bu sorun için mükemmel bir çözüm var sanmıyorum. İlk sorun, span'u a etiketinin içine yerleştirdiğinizde, span yalnızca bağlantının genişliği kadar genişletmek istiyor olmasıdır. a'dan sonra span 'u yerleştirirseniz, yapmaya çalıştığınız şeye yakınlaşmak mümkündür ancak margin-top: 1.3em' u ayarlamak zorunda kalacaksınız ve daha sonra araç ipucunu sola kaydırmak için bir negatif kenar boşluğu ayarlamalısınız. Ancak, sabit bir ayar olacak, bu yüzden her bağlantının başlangıcında tam olarak oturmayacak.

Dinamik left ayarlayan bir jQuery çözüm (ve iyi ölçmek için güzel bir solma etkisi) kadar çırpılmış.

Demo:
Sadece max-width kullanın: Bu soru zaten biraz eski http://jsfiddle.net/wdm954/9jaZL/7/

$('.hasTooltip').hover(function() { 
    var offset = $(this).offset(); 
    $(this).next('span').fadeIn(200).addClass('showTooltip'); 
    $(this).next('span').css('left', offset.left + 'px'); 
}, function() { 
    $(this).next('span').fadeOut(200); 
}); 

Answer 3

olsa bile, ben şu uzlaşma öneririz 200px; ve min-genişlik:% 300; ya da öyleyse,
, ancak min-genişlik maks-genişliğinden daha yüksek olabilir.
Sadece bunu çöz.
Bu şekilde tamamen sıvı araç ipuçlarına sahip olamazsınız, ancak genişlik, içerdiği bağlantı elemanının genişliği ile bir korelasyona girer.
Optik hoşluk açısından bu yaklaşım değer olabilir.

---

düzenlemek:
Eh İtiraf gerekir yazdıklarımı saçmalıktır. Min genişliği maksimum genişliğinden daha yüksek olduğunda, bunun anlamı yoktur. Yani, min-genişliğini yüzde olarak koymak önerdiğim şeyi elde etmeyi başardı. Bunun için üzgünüm.

Answer 4

Bu araç ipuçları da kolayca bir kelime basın temasına entegre edilebilir. Sadece CSS'yi tarzınıza kopyalayın. Css dosyası ve gönderilerinizi oluştururken, sadece HTML kodunun yardımıyla yardım alın ve kendi araç ipuçlarınızı oluşturun. Geri kalan her stil kendi seçiminize göre değiştirilebilen bir stil. Araç ucu kutularının içindeki görüntüleri de kullanabilirsiniz.

http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

Answer 5

Bunu buldum ve benim için çalışıyordu. JS BIN

Kredi