https://github.com/sercaneraslan/tipitip
jQuery ile kullanım için Tooltip eklentisi: Tipitip
https://github.com/sercaneraslan/tipitip
library tooltip
Last synced: 6 months ago
JSON representation
jQuery ile kullanım için Tooltip eklentisi: Tipitip
- Host: GitHub
- URL: https://github.com/sercaneraslan/tipitip
- Owner: sercaneraslan
- Created: 2013-08-07T07:04:47.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2019-11-19T06:15:43.000Z (about 6 years ago)
- Last Synced: 2025-04-05T23:24:26.091Z (10 months ago)
- Topics: library, tooltip
- Language: JavaScript
- Homepage: https://sercaneraslan.github.io/tipitip
- Size: 44.9 KB
- Stars: 20
- Watchers: 15
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tipitip.js
Tipitip, JavaScript ve CSS ile çalışan bir Tooltip (ipucu) kütüphanesidir. Tooltip'te hiçbir imaj kullanılmamış, saf CSS ile yazılmıştır. Diğer kütüphanelerin aksine ilgili sayfaya JavaScript ya da CSS kodu ekleyerek çalıştırılmaz.
Çalışan halini buradan inceleyebilirsiniz.
## Kullanım
Tooltip göstermek istenilen elemena şu 3 özelliği ekleyerek JavaScript ya da CSS yazmadan Tooltip'i çalıştırabilirsiniz. ( tipitip.js ve tipitip.css dosyalarını sayfanıza eklemeyi unutmayınız.)
1. Tooltip eklemek istediğiniz elemana `tipitip-trigger` class'ı eklenmeli. (Tipitip.js bu class'a sahip olan eleman üzerinde çalışır.)
2. Tooltip'in hangi yönden çıkacağı elemana `data-position` özniteliği eklenerek belirlenir. Varsayılan olarak "east" tir. Örnek : `data-position="north"` , `data-position="south-east"` vb.
3. Ve son olarak Tooltip'in içeriğinin nereden alınacağı yazılır. ( `title` ya da `data-content` özniteliklerine içeriği yazabilirsiniz ya da `data-target` özniteliğine bir id ya da class ismi vererek o class'a ya da id' ye sahip elemanın içeriğini otomatik olarak almasını sağlayabilirsiniz. Örnek: `data-target=".class-name"` ya da `data-target="#id-name"`
Not: `data-target` özniteliğini kullanırsanız id ya class verdiğiniz elemena `tipitip-target` class'ı ekleyerek o elemanın `display: none;` olmasını sağlayabilirsiniz.
## Özellikler
* `data-onload` özniteliğine `true` değeri verilerek Tooltip'in sayfa yüklendiğinde açık olarak gelmesi sağlanabilir. Örnek kullanım: `data-onload="true"`
* `data-class` özniteliğine istediğiniz bir class'ı vererek Tooltip'de değişiklikler yapabilirsiniz. Örnek kullanım: `data-class="custom-class"`
* `data-stay-open` özniteliğine `true` değeri verilerek elemanın hover'ında Tooltip'in açık kalması sağlanabilir. Örnek kullanım: `data-stay-open="true"`
* `data-open-event` özniteliğine herhangi bir event yazılarak elemanın hangi event'te açılacağını belirtebilirsiniz. Örnek kullanım: `data-open-event="focus"`
* `data-close-event` özniteliğine herhangi bir event yazılarak elemanın hangi event'te kapatılacağını belirtebilirsiniz. Örnek kullanım: `data-close-event="blur"`
Not: Tooltip eklemek istediğiniz elemanın ne olduğu önemli değildir. (Örneğin; `a`, `span`, `div`, `p` vb etiketleri kullanabilirsiniz.)