Misal:

<a href="example.com" title="My site"> Link </a>

Tarayıcıdaki "title" özelliğinin sunumunu nasıl değiştirebilirim? Varsayılan olarak, sadece sarı arka plana ve küçük yazı tipine sahiptir. Büyütmek ve arka plan rengini değiştirmek istiyorum.

Title özniteliğini biçimlendirmenin bir CSS yolu var mı?

İşte nasıl yapılacağına dair bir örnek:

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

Aslında sadece css attrifadesi, oluşturulan içerik ve nitelik seçicileri (IE8'e kadar çalıştığını düşündüren) gerektiren saf bir CSS çözümü var gibi görünüyor :

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

Kaynak: https://jsfiddle.net/z42r2vv0/2/

@ViROscar'dan girdi / w güncelleme : lütfen yukarıdaki örnekte "title" özelliğini kullandığım halde, belirli bir özellik kullanmanın gerekli olmadığını unutmayın; aslında benim önerim "alt" özelliğini kullanmak olacaktır, çünkü içeriğin CSS'den yararlanamayan kullanıcılar tarafından erişilebilir olması ihtimali vardır.

tekrar güncelle kodu değiştirmiyorum çünkü "title" özelliği temelde "tooltip" niteliği anlamına geldi ve önemli bir metni yalnızca fareyle üzerine gelindiğinde erişilebilen bir alanın içine gizlemek iyi bir fikir değil, bu metni "aria-label" özelliğine erişilebilir hale getirmekle ilgilenen kişi en iyi yer gibi görünüyor: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Gerçek bir titleniteliği biçimlendiremezsiniz

Özellikteki metnin nasıl titlegörüntüleneceği tarayıcı tarafından tanımlanır ve tarayıcıdan tarayıcıya değişir. Bir web sayfasının, titleözelliğe göre tarayıcının görüntülediği araç ipucuna herhangi bir stil uygulaması mümkün değildir .

Ancak, diğer özellikleri kullanarak çok benzer bir şey oluşturabilirsiniz.

CSS ve özel bir özellik ile sözde araç ipucu yapabilirsiniz (ör. data-title)

Bunun için bir data-titleözellik kullanırdım . data-*öznitelikleri özel verileri DOM öğelerinde / HTML'de depolamak için kullanılan bir yöntemdir. Onlara erişmenin birden fazla yolu vardır . Önemli olarak, CSS tarafından seçilebilirler.

data-titleNitelikleri olan öğeleri seçmek için CSS kullanabileceğiniz göz önüne alındığında , daha sonra , kullanarak özniteliğin değerini içeren :after(veya :before) oluşturmak için CSS kullanabilirsiniz . contentattr()

Stilli araç ipucu örnekleri

Daha büyük ve farklı bir arka plan rengiyle (soru başına):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

Daha ayrıntılı stiller ( bu blog yayınından uyarlanmıştır ):

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: nowrap; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
    -moz-box-shadow: 0px 0px 4px #222;  
    -webkit-box-shadow: 0px 0px 4px #222;  
    box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);  
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

<a href="example.com" data-title="My site"> Link </a> with styled tooltip<br/>
<a href="example.com" title="My site"> Link </a> with normal tooltip

Bilinen Sorunlar

Gerçek bir titlearaç ipucundan farklı olarak , yukarıdaki CSS tarafından üretilen araç ipucunun mutlaka sayfada görünmesi garanti edilmez (yani, görünür alanın dışında olabilir). Öte yandan, gerçek bir ipucu için geçerli olmayan geçerli pencerede olması garanti edilir.

Ek olarak, sözde araç ipucu, farenin o öğenin bulunduğu yere göre değil, sözde araç ipucuna sahip öğeye göre konumlandırılır. Sahte araç ipucunun görüntülendiği yere ince ayar yapmak isteyebilirsiniz. Öğeye göre bilinen bir konumda görünmesi, duruma bağlı olarak bir yarar veya dezavantaj olabilir.

Kap olmayan öğeler üzerinde :beforeveya kullanamazsınız:after

İyi bir açıklama içinde var bu yanıt "Ben kullanabilir miyim a: önce veya: Bir giriş alanına after sözde elemanı"

Etkili, sizin gibi unsurları doğrudan bu yöntemi kullanamazsınız Bu araçlar <input type="text"/>, <textarea/>, <img>vb Basit bir çözüm, bir kap değil elemanı sarmak için olan <span>veya <div>kabın üzerine sözde ipucu var.

<span>Kapsayıcı olmayan bir öğeyi sararken sözde araç ipucu kullanma örnekleri :

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #00FF00;
    color: #111;
    font-size: 150%;
    position: absolute;
    padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

.pseudo-tooltip-wrapper {
    /*This causes the wrapping element to be the same size as what it contains.*/
    display: inline-block;
}

Text input with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="input type=&quot;text&quot;"><input type='text'></span><br/><br/><br/>
Textarea with a pseudo-tooltip:<br/>
<span class="pseudo-tooltip-wrapper" data-title="this is a textarea"><textarea data-title="this is a textarea"></textarea></span><br/>

^{Yukarıda bağlı blog yazısı üzerindeki koddan (ki burada ilk kez intihal ettiğim bir cevapta gördüm), bu data-*özellik yerine bir özellik kullanmak benim için bariz görünüyordu title. Bunu yapmak , (şimdi silindi) cevabına snostorm tarafından yapılan bir yorumda da önerildi .}

CSS araç ipucu görünümünü değiştiremez. Tarayıcıya / işletim sistemine bağımlıdır. Farklı bir şey istiyorsanız, varsayılan araç ipucu yerine öğenin üzerine geldiğinizde biçimlendirme oluşturmak için Javascript kullanmanız gerekir.

20 satır JavaScript çözümümü buraya göndereceğimi düşündüm. Mükemmel değil, ancak araç ipuçlarınızdan ihtiyacınız olan şeye bağlı olarak bazıları için yararlı olabilir.

Ne zaman kullanılır?

• TITLETanımlanmış bir özniteliğe sahip tüm HTML öğeleri için araç ipucunu otomatik olarak stilize eder (buna gelecekte belgeye dinamik olarak eklenen öğeler de dahildir)
• Her araç ipucu için Javascript / HTML değişikliği veya kesmek gerekmez (yalnızca TITLEözellik, anlamsal olarak açık)
• Çok hafif (sıkıştırılmış ve küçültülmüş yaklaşık 300 bayt ekler)
• Sadece çok temel bir şekillendirilebilir araç ipucu istiyorsunuz

Ne zaman KULLANILMAZ

• JQuery gerektirir, bu nedenle jQuery kullanmıyorsanız kullanmayın
• Her ikisinde de ipucu bulunan yuvalanmış öğeler için kötü destek
• Ekranda aynı anda birden fazla ipucuna ihtiyacınız var
• Bir süre sonra kaybolmak için ipucuna ihtiyacınız var

Kod

// Use a closure to keep vars out of global scope
(function () {
    var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
    DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
    showAt = function (e) {
        var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
        $("#" + ID).html($(e.target).data(DATA)).css({
            position: "absolute", top: ntop, left: nleft
        }).show();
    };
    $(document).on("mouseenter", "*[title]", function (e) {
        $(this).data(DATA, $(this).attr("title"));
        $(this).removeAttr("title").addClass(CLS_ON);
        $("<div id='" + ID + "' />").appendTo("body");
        showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
        $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
        $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

Herhangi bir yere yapıştırın, DOM hazır olmadan önce bu kodu çalıştırsanız bile çalışmalıdır (DOM hazır olana kadar araç ipuçlarınızı göstermez).

Özelleştirmek

Değişebilirsin varbiraz özelleştirmek için ikinci satırda bildirimleri.

var ID = "tooltip"; // The ID of the styleable tooltip
var CLS_ON = "tooltip_ON"; // Does not matter, make it somewhat unique
var FOLLOW = true; // TRUE to enable mouse following, FALSE to have static tooltips
var DATA = "_tooltip"; // Does not matter, make it somewhat unique
var OFFSET_X = 20, OFFSET_Y = 10; // Tooltip's distance to the cursor

stil

Artık araç ipuçlarınızı aşağıdaki CSS'yi kullanarak şekillendirebilirsiniz:

#tooltip {
    background: #fff;
    border: 1px solid red;
    padding: 3px 10px;
}

Cevabı burada buldum: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

kendi kodum bu şekilde gider, öznitelik adını değiştirdim, aynı metin için iki pop-up'a sahip olduğunuz özelliğin başlık adını koruduğunuzda, başka bir değişiklik fareyle üzerine gelindiğim metnin açık metnin altında görüntülenmesidir.

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(glose);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

Özel araç ipucu deseni için bir jsfiddle İşte

CSS Konumlandırma ve pseduo sınıfı seçicileri temel alır

Kontrol MDN docs sözde sınıfların çapraz tarayıcı desteği için

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

Yerel ipucu stillendirilemez.

Bununla birlikte, çok az kod değişikliği gerektiren veya hiç değişiklik gerektirmeyen, öğe üzerine getirildiğinde (yerel araç ipuçları yerine ve bunları bastırır) katmanları yüzen katmanları gösteren bazı kitaplığı kullanabilirsiniz ...

Varsayılan tarayıcı araç ipucuna stil uygulayamazsınız. Ancak kendi özel HTML araç ipuçlarınızı oluşturmak için javascript kullanabilirsiniz.

a[title="My site"] {
    color: red;
}

Bu, örneğin eklemek istediğiniz herhangi bir özellikle de çalışır:

HTML

<div class="my_class" anything="whatever">My Stuff</div>

CSS

.my_class[anything="whatever"] {
    color: red;
}

İşe bakın: http://jsfiddle.net/vpYWE/1/