【CSS】CSSのみのツールチップライブラリSimple Hint

Simple HintはCSSのみで実装するツールチップライブラリです。
フェードイントランジションやアニメーション、カスタムサイズ、色を含むさまざまな機能が準備されています。

CSS

<link rel="stylesheet" href="simple-hint.css">
<style>
span { position: relative; }
</style>

HTMLマークアップ

<span data-hint="your message goes here" class="hint-top">Top hint</span>
<span data-hint="your message goes here" class="hint-bottom">Bottom hint</span>

Position ツールチップ表示位置 .hint-top, .hint-bottom, .hint-left, .hint-right
Sizing ツールチップサイズ。Positionの後に続ける。 -s-small, -s-med, -s-big
Color type ツールチップカラー。Positionの後に続ける。 -t-info, -t-success, -t-error, -t-notice
Mobile disable モバイル無効。Positionの後に続ける。 -mobile
Tooltip persist ツールチップ持続 .hint-persist
Fade in フェードイン .hint-fade
Animation アニメーション .hint-anim
Delay .hint-fade または .hint-animに追加して遅延させます。 -d-short, -d-med, -d-long

後に続けるのは .hint-top-s-big のような形にします。

Custom fonts

[simple-hint]:after {
font-family: 'font_name'; }

Changing the mobile option

/* changed 768 to whatever value */
@media only screen and (max-width: 768px) {
[class*="hint-"][class*="-mobile"]:after, [class*="hint-"][class*="-mobile"]:before {
display: none; 
} 
}

Custom color types

[class*="hint-"][class*="-t-custom_type_name"] { /* set a custom name */
&[class*="hint-bottom"]:before{
border-bottom-color: custom_background_color;
}
&[class*="hint-top"]:before{
border-top-color: custom_background_color;
}
&[class*="hint-right"]:before{
border-right-color: custom_background_color;
}
&[class*="hint-left"]:before{
border-left-color: custom_background_color;
} 
&:after {
background: custom_background_color;
color: custom_text_color;
}
}

ライセンスはMITです。

 

【CSS】CSSのみのツールチップライブラリSimple Hint

  • LATEST
  • RELATED
  • POPULAR