Last active
July 20, 2017 12:29
-
-
Save ppeeou/9f3d45fc76e31dc319c8889c4d376b39 to your computer and use it in GitHub Desktop.
html tooltip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* css */ | |
| /* Start Body */ | |
| body{ | |
| margin: auto; | |
| padding: 20px 50px; | |
| } | |
| /*tooltip Box*/ | |
| .tooltip-container { | |
| position: relative; | |
| border-radius: 9px; | |
| padding: 0 20px; | |
| margin: 10px; | |
| display: inline-block; | |
| transition: all 0.3s ease-in-out; | |
| cursor: pointer; | |
| } | |
| .tooltip-container > p{ | |
| display: inline-block; | |
| } | |
| .tooltip-container > i{ | |
| vertical-align: middle; | |
| } | |
| /*tooltip */ | |
| .tooltip__ul{ | |
| position: relative; | |
| padding-left: 10px; | |
| margin: auto; | |
| text-align: left; | |
| } | |
| .tooltip__li{ | |
| list-style: none; | |
| padding: 4px 10px 4px 15px; | |
| margin : 1px auto; | |
| } | |
| /* tooltip after*/ | |
| .tooltip-wrapper:after { | |
| content: " "; | |
| position: absolute; | |
| display: inline-block; | |
| right: 9px; | |
| left:auto; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border:9px solid transparent; | |
| border-color: #888 transparent transparent transparent; | |
| } | |
| /*bottom*/ | |
| .tooltip-bottom .tooltip-wrapper { top:150%; left:20%; } | |
| .tooltip-bottom .tooltip-wrapper::after{ | |
| top:-18px; | |
| left:40%; | |
| transform: rotate(180deg); | |
| } | |
| .tooltip-wrapper { | |
| top :10px; | |
| z-index: 1; | |
| width: 100%; | |
| padding: 2px; | |
| background: #fff; | |
| color: #586069; | |
| position: absolute; | |
| left: -40%; | |
| border-radius: 9px; | |
| font: 16px; | |
| box-shadow: 0 0 3px rgba(56, 54, 54, 0.86); | |
| } | |
| /* html */ | |
| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <script src='./dist/main.bundle.js'></script> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" | |
| crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <h1>CSS ToolTip Smooth Animation </h1> | |
| <!-- Bottom tooltip--> | |
| <div class="tooltip-container tooltip-bottom"> | |
| <p> NickName </p> | |
| <i class="glyphicon glyphicon-triangle-bottom"></i> | |
| <div class="tooltip-wrapper "> | |
| <ul class="tooltip__ul"> | |
| <li class="tooltip__li">Logout</li> | |
| <li class="tooltip__li">Setting</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| $('.tooltip-container').on('click', 'p,i', function (e) { | |
| let target = $(e.target); | |
| let $tooltip = target.closest('.tooltip-container'); | |
| let $tooltip_wrapper = $($tooltip.children()[2]); | |
| let state = $tooltip_wrapper.css('visibility'); | |
| if (state == 'hidden') { | |
| $tooltip_wrapper.css('visibility', 'visible'); | |
| } else { | |
| $tooltip_wrapper.css('visibility', 'hidden'); | |
| } | |
| }); | |
| //tooltip 제거 | |
| $(document).mouseup(function (e) { | |
| var container = $(".tooltip-wrapper"); | |
| if (!container.is(e.target) && container.has(e.target).length === 0) { | |
| container.css("visibility", "hidden"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment