jquery - How to make a pure CSS tooltip? -
i trying create pure css tooltip , did research couldn't find im looking , if hard transfer someones confusing code own. don't mind if jquery needed result much rather avoid if possible! know how design tooltip match scheme if possible. here element of own code tooltip for. element need tool tip div id `choosestatealabama. there jsfiddle demo below also.
html
<body> <div class="container"> <?php include ("_includes/sidemenu.php");?> <div id="contentcontainer"> <div id="choosestaterowone"> <div id="choosestatealabama"><p>al</p></div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="_javascript/sidemenu.js"></script> </body> css
body { height: 100%; width:100%; overflow:hidden; } .container{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:-9999; } #contentcontainer { width: 100%; height: 100%; background:#ffffff; top: 5%; position: absolute; float:left; bottom: 30px; z-index: -9999; background-size:100% 100%; overflow:hidden; } p { margin:auto; } p:before { content:''; display:inline-block; height:100%; vertical-align:middle; } #choosestaterowone { width: 98%; height:16.6%; left: 0; top:2%; position: absolute; margin-left: 1%; margin-right: 1%; } #choosestatealabama { width: 9.1%; height: 100%; top: 0; left: 0; background:#383d3f; position: absolute; background-size:100% 100%; display: flex; color: #ffffff; font-family: gotham, "helvetica neue", helvetica, arial, sans-serif; font-style: normal; font-weight: bold; font-size: 2.5vw; text-align: center; vertical-align: middle; } #choosestatealabama:hover { background: #fbc500; cursor:pointer; } demo
jsfiddle
edit code this...
html :::
<body> <div class="container"> <?php include ("_includes/sidemenu.php");?> <div id="contentcontainer"> <div id="choosestaterowone"> <div id="choosestatealabama" class="tooltip"><p>al</p> <span>tooltip</span> </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="_javascript/sidemenu.js"></script> </body> in css need add together 2 things....
div.tooltip span { display:none; padding:14px 20px; margin-top:1px; margin-left:5px; line-height:16px; } div.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #dca; background:#fffaf0; } & if want seek jquery @ link.
http://jqueryui.com/tooltip/
jquery html css html5 css3
No comments:
Post a Comment