Fandom Developers Wiki
Advertisement

Tooltips, belirli ögelerin üzerine gelindiğinde araç ipuçlarının görüntülenmesini sağlayan bir betiktir.

Not: Mobil kullanıcılarınızı unutmayın. İçeriği görüntülemenin tek yolu olarak araç ipuçlarını kullanmayın. Bunları daha çok bir terimin hızlı bir özeti şeklinde kullanmak ve tüm ayrıntıları bir sayfada bulundurmak en iyisidir.

Kurulum[]

Kullanım[]

Betiğinin, belirli bir ögenin üzerine getirildiğinde bir araç ipucu göstermesini sağlamak için, ona özel bir sınıf eklemelisiniz. Bazı araç ipucu türleri, data- öznitelikleri aracılığıyla belirtilen ek parametreleri de destekler (daha fazlası için Yapılandırma bölümüne bakın).

Üç farklı araç ipucu türü vardır:

Temel araç ipuçları – sınıf
basic-tooltip
Bu tür araç ipucu, yalnızca bu ögenin title içeriğini gösterecektir.
<span class="basic-tooltip" title="Araç ipucunun içinde gösterilecek metin">Temel araç ipuçları</span>
Temel araç ipuçları
Gelişmiş araç ipuçları – sınıf
advanced-tooltip
Bu araç ipucunun içeriği, tooltip-contents sınıfıyla ögenin içinden alınır. Ögenin içeriği işlenmiş olarak alınır. Bu, araç ipucunu biçimlendirmek için viki işaretlemesinin ve HTML ögelerinin kullanılmasına izin verir. Bu araç ipuçlarının içeriğinin sayfa yüklendiğinde yüklendiğini unutmayın. Bu, büyük miktarda araç ipucuyla (aynı aracın tekrar tekrar kullanılması dahil) sayfa yükleme sürelerini önemli ölçüde yavaşlatabilir.
<div class="advanced-tooltip" style="display:inline-block">Gelişmiş araç ipuçları<div class="tooltip-contents">Araç ipucu içeriği<br><code>HTML etiketleri dahil</code></div></div>
Gelişmiş araç ipuçları
Araç ipucu içeriği
HTML etiketleri dahil
Advanced tooltips will cause a new line when they're used inline if any of the tooltip content contains a block-level tag (regardless of styles), due to the MediaWiki parser automatically adding <p> tags to the subsequent text. This can be solved by wrapping the entire text in a <span> or <div> to suppress the automatic <p> tag, e.g.
<span>This is an example of <span class="advanced-tooltip">Gelişmiş araç ipuçları<div class="tooltip-contents">Tooltip content</div></span> being used inline.</span>
This is an example of Gelişmiş araç ipuçları
Tooltip content
being used inline.
Özel araç ipuçları – sınıf
size ait
Bu tür, azaltılmış sayfa yükleme süreleri ile araç ipucunun içeriği üzerinde en fazla kontrolü sağlar. Araç ipuçları oluşturmak ve üzerine geldiğiniz ögenin data- öznitelikleri aracılığıyla şablona parametreler iletmek için şablonları kullanabilirsiniz. Gelişmiş araç ipuçlarına göre avantajı, araç ipucu içeriğinin gerektiğinde yüklenmesi ve birden çok öge (aynı parametreler) için aynı araç ipucunun bir kez yüklenmesidir.
<span class="custom-tooltip-text" data-parameter="Birkaç değer">Özel araç ipuçları – text</span>
Özel araç ipuçları – text
<span class="custom-tooltip-parse" data-parameter="Birkaç değer">Özel araç ipuçları – parse</span>
Özel araç ipuçları – parse

Birleştirme[]

Aynı anda görüntülemek için farklı türde araç ipuçları birleştirilebilir. Araç ipuçlarının sırası, sınıfların sırası ile aynıdır.

<div class="advanced-tooltip basic-tooltip custom-tooltip-parse custom-tooltip-text" data-parameter="Parametre" style="display: inline-block;">Birleşik araç ipuçları<div class="tooltip-contents">Gelişmiş araç ipucu</div></div>
Birleşik araç ipuçları
Gelişmiş araç ipucu

Yapılandırma[]

Herhangi bir kurulum olmadan, betik yalnızca temel ve gelişmiş araç ipuçlarını destekleyecektir. Betik için yapılandırmayı içeren 3 değişken vardır. Bunları vikinizde MediaWiki:Common.js içinde belirtebilirsiniz.

Ana yapılandırma – tooltips_config[]

Burada, bu nesneyi kullanarak bazı temel özellikleri ayarlayabilirsiniz:

events
Betiği başlatıldığında mevcut olmayan araç ipuçlarının aranmasını tetikleyecek pencere nesnesinin JavaScript olaylarının bir listesidir. Bu şekilde, sayfa yüklendikten ve araç ipuçları başlatıldıktan sonra eklenen özel arayüz öğesinde araç ipuçlarının çalışmasını sağlayabilirsiniz. Örneğin, özel bir sağ ray modülünde.
noCSS
Varsayılan CSS'nin içe aktarılmasını devre dışı bırakmak istiyorsanız, bunu true olarak ayarlayın.
offsetX / offsetY
Bunlar, araç ipucunun imlecin işaret ettiği yerden (sırasıyla) sağa ve aşağı taşınacağı değerlerdir (araç ipucunun marjının onu daha ileriye taşıyabileceğini unutmayın). Her ikisi için de varsayılan değer 8 olup, 5'in altındaki değerler önerilmez.
waitForImages
Araç ipuçlarının, içinde resimler olduğunda nasıl davranacağını değiştirecektir. Varsayılan olarak (false) araç ipuçları, resimler henüz tam olarak yüklenmemiş olsa bile gösterilir. Resimler, yüklendiklerinde sonunda görünecektir (geç yükleme). Bu değerin true olarak ayarlanması, araç ipucunu göstermeden önce komut dosyasının tüm resimlerin tamamen yüklenmesini beklemesine neden olur.

Yapılandırma nesnesi örneği:

window.tooltips_config = {
    events: ['CustomEvent'],
    noCSS: true,
    offsetX: 5,
    offsetY: 10,
    waitForImages: true,
}

Özel araç ipucu türleri oluşturma – tooltips_list[]

Bu diziye kendi araç ipuçlarınızı ekleyebilirsiniz. Her araç ipucu türü, şu özelliklere sahip bir nesnedir:

classname
Bu tür araç ipucunu tetikleyecek CSS sınıfı. Bu özellik gereklidir.
onParsed
Bu işlev, çözümlenen getirildiğinde yürütülür (içeriği araç ipucudur - this).
parse
metin türüne benzer, ancak ortaya çıkan metin ayrıştırılmış olacak ve kısa bir gecikme pahasına viki sözdiziminin kullanımına izin verecektir.
text
Bu dize veya işlev, araç ipucunun içeriği olarak kullanılacaktır.

Hem text hem de parse bir dize veya işlev olabilir.

Değer bir dize ise, imlecin işaret ettiği ögeden alınacak parametreleri kullanabilirsiniz. Bir parametreyi kullanmak için metne şunu eklemeniz gerekir: <#parametre-adi#>. Bu etiket, öğenin data-parametre-adi özniteliğinin değeriyle değiştirilecektir. Birden çok parametre ve bir parametreyi birden çok kez kullanabilirsiniz.

{{Şablon|<#deger#>}}  <!-- <#deger#>, data-deger özniteliğinin içeriğiyle değiştirilecek -->

Diğer yol, araç ipucu olmayan yeni bir öğenin üzerine gelindiğinde yürütülecek bir işlev belirtmektir. Bu işlev, ilk bağımsız değişkeni olarak bu öğeye sahiptir ve araç ipucunun (veya ayrıştırılacak vikimetnin) içeriğini döndürmelidir. Herhangi bir özniteliğe kendiniz erişebileceğiniz için döndürülen dize yukarıdaki gibi parametreleri desteklemiyor (ör: $(elem).data('parametre-adi'))

Bir araç ipucu türü için ayarları olan bir nesne örneği:

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: '{'+'{Araç ipucu|<#ad#>|<#deger#>}}',   // '+', MediaWiki'nin ayarlarla birlikte sayfadaki şablonu yoksaymasını sağlar
}

Ayrıştırma işlevine sahip bir nesne örneği:

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: function parse(elem) { return '{'+'{Araç ipucu|' + $(elem).data('ad') + '|' + $(elem).data('deger') + '}}' },
}

Genel özellikler[]

{Bu özellikler, yerleşik olanlar da dahil olmak üzere tüm türler için kullanılabilir (basic-tooltip ve advanced-tooltip):

delay
Adından da anlaşılacağı gibi. Araç ipucunun milisaniye cinsinden belirtilen gecikmeden sonra görünmesini sağlar. İpucu: 1 saniye = 1000 milisaniye.
onShow / onHide
Araç ipucu gösterildikten hemen sonra (sırasıyla) ve gizlenmeden hemen önce tetiklenecek sözde olaylardır. Bunlar, bağlamları (this) olan araç ipucunun kendisi ve araç ipucunu bir bağımsız değişken olarak tetikleyen fareyle üzerine gelme tanıtıcısı olan geri arama işlevleridir.

İki özel araç ipucu için ayarlar ve temel araç ipuçlarının davranışını değiştirme örneği:

window.tooltips_list = [
    {
        classname: 'custom-tooltip-text',
        text: "Parametre: <#parametre#><br>Bu yalnızca metin ve HTML'dir - vikimetin '''ayrıştırılmayacaktır'''",
    }, {
        classname: 'custom-tooltip-parse',
        parse: '{|style="white-space:nowrap;"\n!Parametre:\n|<#parametre#>\n|-\n!Lc:\n|{'+'{lc:<#parametre#>}}\n|-\n!Uc:\n|{'+'{uc:<#parametre#>}}\n|-\n!PAGENAME:\n|{'+'{PAGENAME}}\n|}',
    }, {
        classname: 'basic-tooltip',
        delay: 500,
        onHide: function(handle) { $(this).html($(handle).html()) },
    },
]

Hata ayıklama modu – tooltips_debug[]

Bunu true olarak ayarlamak, bazı öğeleri görünür hale getirerek sorunları tespit etmeyi kolaylaştırır. Hata ayıklama modu, URL'nin sonuna ?ttdebug=true eklenerek de geçici olarak açılabilir. Şöyle: https://dev.fandom.com/wiki/Tooltips?ttdebug=true

Diğer notlar ve ipuçları[]

  • Araç ipuçlarına ek sınıflar:
    • has-redlinks - (adından da anlaşılacağı gibi) içinde kırmızı bağlantılar bulunan araç ipuçlarına verilir. Bu, eksik şablonlara sahip araç ipuçlarını gizlemek için kullanılabilir.
    • tooltip-loading - hala ayrıştırılmış içeriğin yüklenmesini bekleyen araç ipuçlarına verilir. Yükleme göstergesini göstermek için kullanabilir veya hazır olana kadar araç ipucunu gizleyebilirsiniz.
    • tt-arac-ipucu-turu - her araç ipucu, türüne göre sınıf alır (örn: tt-temel-arac-ipucu). Tarklı görünen araç ipucu türlerine sahip olmak için harikadır.
  • Araç ipuçlarınızın gölgesi varsa, bunlara kenar boşluğu ekleyerek veya etkin araç ipuçlarını (#tooltip-wrapper) içeren <div> etiketine dolgu ekleyerek alan açmak isteyebilirsiniz.

Vitrin[]

Nasıl çalıştığını göstermek için bu betiği kullanıyorsa, vikinizi listeye eklemekten çekinmeyin.

Ayrıca bakınız[]

  • TippingOver - Tooltips.js'ye benzer bir uzantı
  • CSS3Tooltip - yalnızca CSS3 ile yapılmış bir araç ipucu eklentisi.
  • WdsTooltips - hem mobil hem de masaüstünde çalışan bir araç ipucu.
Advertisement