Css data ile tooltip yapma

Css data ile tooltip yapma

16 Mart 2014

Art─▒k bir ├žok ┼čeyi javascript olmadan css ile de yapabiliyoruz. Mesela ┼čimdi g├Âsterece─čim tooltip de bu ┼čeylerden bir tanesi. ilk ├Ânce ilk defa tooltip kelimesini duyanlar i├žin tooltipi a├ž─▒klayay─▒m bazen bir linkin ├╝zerine gelince veya bir yaz─▒n─▒n ├╝st├╝ne gelince bir uyar─▒ penceresinin ├ž─▒kmas─▒d─▒r a┼ča─č─▒da da resimde ├Ârnek olarak g├Âsterdim.

css tooltip dataYukar─▒daki resmi blog konusu sitesinden ald─▒m bizzat orada uygulamad─▒m. ─░sterseniz zaman girip g├Ârebilirsiniz.

┼×imdi tooltipi ├Â─črendi─čimize g├Âre bunun normalde nas─▒l ┼čimdi nas─▒l yap─▒laca─č─▒n─▒ a├ž─▒klayay─▒m normalde bu ├Âzelli─či kullanmak i├žin jQuery ui arac─▒n─▒ veya farkl─▒ javascriptler kullanarak yapabiliyoruz ama geli┼čen teknoloji ile bunu art─▒k csslede ├žok basit bir bi├žimde yapabiliyoruz b├Âylelikle sitenizde javascript az oldu─ču i├žin hem h─▒zl─▒ a├ž─▒lma hemde tootlipin tasar─▒m─▒n─▒ istedi─činiz gibi ayarlama ayr─▒cal─▒─č─▒n─▒ kavu┼čmu┼č oluyorsunuz ­čśÇ

Hemen kodlar─▒m─▒za ge├želim

ilk ├Ânce htmlden ba┼čl─▒yoruz tooltipin ├ž─▒kmas─▒n─▒ istedi─činiz html etiketinin i├žerisine ┼ču ├Ârnekteki gibi ├Âzel data parametremizi giriyoruz

┬á<div class="divadi" tooltip="Tooltipde ├ž─▒kacak yaz─▒"></div>

G├Ârd├╝─č├╝n├╝z gibi normalde tooltip parametresi html kurallar─▒na g├Âre yok ama biz html5 ile gelen data se├žici kullanarak kendimize ait bir etiket parametresi olu┼čturabiliyoruz yani oradaki “tooltip” ad─▒ “hasan” veya “aciklamayazisi” gibi de olabilir. ┼×imdi S─▒ra CSS de

[tooltip]:hover:after{ content: attr(tooltip); text-align:center; position: relative; width: 150px; padding: 5px; font-size: 12px; background: #000; color: #fff;top: -28px; float: left; left: -72px; border-radius: 3px; }

Yukar─▒daki css komutunu direk css nize eklerseniz en yukar─▒daki resim deki g├Âr├╝nt├╝ ├ž─▒kacakt─▒r. Siz istedi─činiz gibi d├╝zenleyebilirsiniz tabi.

├ľRNEK : Result tab─▒n─▒ se├žerek g├Ârebilirsiniz

WEB D├ťNYASI ─░LE ─░LG─░L─░ G├ťNCEL B─░LG─░LER ─░├ç─░N ABONE OLUN!