CSSのみで実現する軽量なツールチップ「Ballon.css」
WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.css」CSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.css — CSS tooltips fo
Protip - Yet another jQuery tooltip plugin
Download minified JS for production use. Or include the following line before your closing </body> tag. <script src="//gitcdn.link/repo/wintercounter/Protip/master/protip.min.js"></script> Don't forget: you need to have jQuery also. Download minified CSS for production use. Or include the following line between your <head> tag. <link rel="stylesheet" href="//gitcdn.link/repo/wintercounter/Protip/m
darktooltip: A simple customizable tooltip with confirm option and effects
darktooltip Star Tweet darktooltip is a simple customizable tooltip with confirm option and effects Basic usage: <div id="def" class="box" data-tooltip="Hello world">default</div> $('#def').darkTooltip(); Advanced options You can specify some options to customize the appearance of darktooltip. Like this: $('#def').darkTooltip({ animation: 'flipIn', gravity: 'west', confirm: true, theme: 'light' ..
Simptip: a simple CSS tooltip made with Sass
A simple CSS tooltip made with Sass First of all let's talk about position. You can have a tooltip in different directions ( top , left , bottom , right ). Secondly as you know color is an important factor. You can also have a Tooltip in different color such as success , info , warning and danger. And finally other features like ( soft edge , half arrow , movable effect , fade effect , multiline t
Trip.js
What is Trip.js For websites, it's quite common that you need to have a tutorial trip to teach new comers how to user your own services. In addition to this, when there is any new feature coming up, you also need that to make sure your hard works do have been seen and used by users. Same like you, we have been making tons of routine works like that and that's why we are going to make a super light
Hint.css - A tooltip library in CSS
Only CSS. No JavaScript! Small file size. Only 1.5KB minified and gzipped! Easy to use. No config required. Supports Accessibility with aria-label attributes Works in all modern browsers. First get the library from the github repo. Then in your HTML, include the library CSS: <link rel="stylesheet" href="hint.css" /> Now, all you need to do is give your element any position class and tooltip text u
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Red Team Design