cooltipz纯css实现浮动提示框多种效果
代码语言:html
所属分类:悬停
代码描述:cooltipz纯css实现浮动提示框多种效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/cooltipz.min.css"> <style> :root { --cooltipz-fontawesome: FontAwesome; } .custom--small { --cooltipz-small: 4.5rem; } .custom--medium { --cooltipz-medium: 8rem; } .custom--large { --cooltipz-large: 12rem; } .custom--revert { --cooltipz-bg-color: #fff; --cooltipz-text-color: #000; } .custom--help { --cooltipz-cursor: help; } .custom--delay { --cooltipz-delay-show: 1s; --cooltipz-delay-hide: 2s; } .custom--far { --cooltipz-slide: 50px; } .custom--still { --cooltipz-slide: 0; } .custom--opposite { --cooltipz-slide: -50px; } .custom--big { --cooltipz-font-size: 1.6rem; --cooltipz-arrow-size: 1rem; } .custom--arrow { --cooltipz-arrow-size: 1.5rem; --cooltipz-border-radius: 0; } .custom--round { --cooltipz-border-radius: 5rem; } .custom--sharp { --cooltipz-border-radius: 0; } .custom--pointy { --cooltipz-arrow-size: 0.82rem; --cooltipz-border-radius: 0; } .custom--slow { --cooltipz-timing: 3s; } /* Nothing to do with Cooltipz.css, just making the examples look pretty */ body { min-height: 100%; font-family: Verdana, Arial, sans-serif; padding-bottom: 2rem; } body, main, section { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } main div { margin: 2rem; } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; } .github-corner svg { border: 0; color: #fff; fill: #151513; height: 5rem; left: 0; position: absolute; top: 0; transform: scale(-1, 1); width: 5rem; } .github-corner .octo-arm { transform-origin: 8.125rem 6.625rem; } @media (max-width: 31.25em) { .github-corner:hover .octo-arm { animation: none; } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out; } } </style> </head> <body translate="no"> <header class="header"> <h2>Cool tooltips made from pure CSS</h2> <p class="m-0">A pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use.</p> <p>Cooltipz.css makes adding tooltips to existing HTML elements easy and simple, without JavaScript.</p> <a href="https://cooltipz.jackdomleo.dev?ref=codepen.io/JackDomleo" target="_blank" rel="noreferrer" class="link">View official docs</a> </header> <main> <section> <div> <button data-cooltipz-dir="left" aria-label="Hello there!">Left</button> <button data-cooltipz-dir="top" aria-label="Hello there!">Top</button> <button data-cooltipz-dir="bottom" aria-label="Hello there!">Bottom</button> <button data-cooltipz-dir="right" aria-label="Hello there!">Right</button> </div> <div> <button data-cooltipz-dir="bottom-left" aria-label="Hello there!">Bottom left</button> <button data-cooltipz-dir="top-left" aria-label="Hello there!">Top left</button> <button data-cooltipz-dir="top-right" aria-label="Hello there!">Top right</button> <button data-cooltipz-dir="bottom-right" aria-label="Hello there!">Bottom right</button> </div> <div> <button data-cooltipz-dir="top" data-cooltipz-size="small" aria-label="Hello there! I am a small tooltip and I will wrap the text within me."> Small </button> <button data-cooltipz-dir="top" data-cooltipz-size="medium" aria-label="Hello there! I am a medium tooltip and I will wrap the text within me. I'm wider thhan the small tooltip."> Medium </button> <button data-cooltipz-dir="top" data-cooltipz-size="large" aria-label="Hello there! I am a large tooltip and I will wrap the text within me. I'm wider thhan the small and the medium tooltip."> Large </button> <button data-cooltipz-dir="top" data-cooltipz-size="fit" aria-label="Hello there! I am a 'fit' tooltip and I will wrap the text within me. My width will always be equal to the width of my parent element."> Fit </button> </div> <div> <button data-cooltipz-dir="top" data-cooltipz-static aria-label="Hello there!"> No animation </button> <button data-cooltipz-dir="top" data-cooltipz-visible aria-label="Hello there!"> Visible </button> </div> <div> <button data-cooltipz-dir="top" aria-label="HTML character codes: © ® ☎ ♺ ∅">HTML Codes ♫</button> <button data-cooltipz-dir="top" aria-label="Emojis: 😎🚗🍔💩👏✔❤">Emojis 😎</button> <button data-cooltip.........完整代码请登录后点击上方下载按钮下载查看
网友评论0