Giters

chinchang / hint.css

A CSS only tooltip library for your lovely websites.

Home Page:https://kushagra.dev/lab/hint/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Maybe you want to use something from it

NicoDrouin opened this issue · comments

commented

I'm using a modified Hint.css v1.3 for my own project.
Maybe you will be interested with this code :
Use Edit for the HTML version.

Three things:
1 )tip : tooltip in two colors
2) notif : side of the screen tip
3) notif-top : top of the screen tip

<title>Demo tip</title> <style type="text/css"> /* Tooltip - Très inspiré par : HINT.css - Source: https://github.com/chinchang/hint.css - Demo: http://kushagragour.in/labs/hint/ ------------*/ /* switching box model for all elements - Sources : KNACSS & css-tricks / Coyier - Needed for notif-top */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} [tip] ,[notif],[notif-top]{ position: relative; display: inline-block; } [tip]:before, [tip]:after , [notif]:before ,[notif-top]:before{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } [tip]:before, [tip]:after { position: absolute; visibility: hidden; opacity: 0; filter: alpha(opacity=0); z-index: 1030; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease; } [tip]:hover:before, [tip]:hover:after, [tip]:focus:before, [tip]:focus:after { visibility: visible; opacity: 0.9; filter: alpha(opacity=90); } [tip]:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; z-index: 1031; } [tip]:after { content: attr(tip); background: #383838; color: white; text-shadow: 0 -1px 0px black; padding: 0.55em 0.9em; font-size: 0.9em; white-space: nowrap; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); border-radius: 4px; } .tip-top:before {border-top-color: #383838;} .tip-bottom:before{ border-bottom-color: #383838;} .tip-left:before{border-left-color: #383838;} .tip-right:before {border-right-color: #383838;} /* Defines the positoning logic for the tooltips. */ /* top tooltip */ .tip-top:before{margin-bottom: -12px;} .tip-top:after{margin-left: -18px;} .tip-top:before, .tip-top:after { bottom: 100%; left: 50%; } .tip-top:hover:after, .tip-top:hover:before, .tip-top:focus:after, .tip-top:focus:before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); } /* bottom tooltip */ .tip-bottom:before {margin-top: -12px;} .tip-bottom:after {margin-left: -18px;} .tip-bottom:before, .tip-bottom:after {top: 100%;left: 50%;} .tip-bottom:hover:after, .tip-bottom:hover:before, .tip-bottom:focus:after, .tip-bottom:focus:before { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); transform: translateY(8px); } /* right tooltip */ .tip-right:before { margin-left: -12px; margin-bottom: -6px; } .tip-right:after {margin-bottom: -14px;} .tip-right:before, .tip-right:after {left: 100%;bottom: 50%;} .tip-right:hover:after, .tip-right:hover:before, .tip-right:focus:after, .tip-right:focus:before { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); } /* left tooltip */ .tip-left:before { margin-right: -12px; margin-bottom: -6px; } .tip-left:after {margin-bottom: -14px;} .tip-left:before, .tip-left:after { right: 100%; bottom: 50%; } .tip-left:hover:after, .tip-left:hover:before, .tip-left:focus:after, .tip-left:focus:before { -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); } /* .tip-white pour une variante claire légèrement bleutée et un peu plus grosse */ .tip-white:after { background: #eee; color: #5a5a5a; text-shadow: none; box-shadow: 4px 4px 8px rgba(0, 0, 120, 0.3); padding: 0.3em 0.6em; font-size: 1.3em; opacity: 0.95; filter: alpha(opacity=95); border-radius: 6px;} .tip-top.tip-white:before {border-top-color: #e3e3e3;} .tip-bottom.tip-white:before{ border-bottom-color: #e3e3e3;} .tip-left.tip-white:before{border-left-color: #e3e3e3;} .tip-right.tip-white:before {border-right-color: #e3e3e3;} /* notif */ [notif]:before,[notif-top]:before { position: fixed; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 1040; pointer-events: none; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; transition: 0.4s ease; padding: 2.55em 2.9em; font-size: 1em; box-shadow: 3px 3px 6px rgba(40, 40, 40, 0.3); border-radius: 4px; } content: attr(notif); border-radius: 4px; left: 100%; bottom: 27%; width:303px; } [notif-top]:before { content: attr(notif-top); } [notif]:hover:before, [notif]:focus:before { text-align:left; -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); transform: translateX(-300px); } [notif-top]:before { left: 50%; margin-left: -300px; margin-top:-90px; top: 0%; width:600px; height:75px; text-align:center; } [notif-top]:hover:before , [notif_top]:focus:before { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); transform: translateY(100px); } /* Three different colors from Bootstrap for notifications : blue (info/default), green (success), red (error) */ [notif]:before , [notif-top]:before , [info]:before{ background: #d9edf7; color:#3a87ad; } [success]:before { color: #468847; background: #dff0d8; z-index: 1041; } color: #b94a48; background: #f2dede; z-index: 1042; } /* CSS for the demo */ #bloc { text-align:center; margin-top:10px;} .demo { border: 1px dashed #ccc; padding:35px; margin:0 auto; margin-bottom:25px; background: #f5f5f5; width:50%; max-width:700px; min-width:420px;} </style>

Tooltip & Notif

Tooltip basique

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span class="tip-top" tip='Hello Tip'>Hello Text</span>

Tooltip alternatif : .tip-white

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span class="tip-top tip-white" tip='Hello Tip'>Hello Text</span>

Notif

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span notif='Hello notif' success >Hello Text</span>

Notif alternatif : notif-top

Hover me ! | Hover me ! | Hover me ! | Hover me !

Example : <span notif='Hello notif' success >Hello Text</span>
commented

If you could put a link to some demo on cssdeck or something, that would be great. Waiting to see this.

commented

No this one actually is better : http://www.tiptip.p.ht/testbasev0.02.htm

commented

This looks interesting, specially the screen notifications. I would definitely like to include them as part of Hint.css. But I'll have to see if it goes well with the library's motive/usecase. Thanks for sharing this cool stuff :)