Simptip - 要チェック！スタイルシートだけで実現するツールチップ MOONGIFT

テクノロジーカテゴリーの変更を依頼記事元:

www.moongift.jp

18 usersがブックマークコメント

記事へのコメント2件

注目コメント
新着コメント

neoash content: attr(data-tooltip);

2013/11/24 リンク

minonet Simptip - 要チェック！スタイルシートだけで実現するツールチップスタイルシートだけで実現しますよ！訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを...

2013/11/07 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fwww.moongift.jp%2F2013%2F11%2Fsimptip-%25E8%25A6%2581%25E3%2583%2581%25E3%2582%25A7%25E3%2583%2583%25E3%2582%25AF%25EF%25BC%2581%25E3%2582%25B9%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25B7%25E3%2583%25BC%25E3%2583%2588%25E3%2581%25A0%25E3%2581%2591%25E3%2581%25A7%25E5%25AE%259F%25E7%258F%25BE%25E3%2581%2599%25E3%2582%258B%25E3%2583%2584%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://www.moongift.jp/2013/11/simptip-%E8%A6%81%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%EF%BC%81%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%A0%E3%81%91%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%83%84/">Simptip - 要チェック！スタイルシートだけで実現するツールチップ MOONGIFT</a><a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2013/11/simptip-%E8%A6%81%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%EF%BC%81%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%A0%E3%81%91%E3%81%A7%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%83%84/">はてなブックマーク - Simptip - 要チェック！スタイルシートだけで実現するツールチップ MOONGIFT</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

Simptip - 要チェック！スタイルシートだけで実現するツールチップ MOONGIFT

スタイルシートだけで実現しますよ！訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチ... スタイルシートだけで実現しますよ！訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを組み込んだり複雑な指定をしないといけないのでは使い勝手が悪いですよね。そこで使ってみて欲しいのがSimptipになります。CSSを読み込むだけで使えてしまうツールチップです。使い方は簡単で、Simptipを読み込むだけです。 <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> これで準備は完了です。例えば文字列の上にツールチップを出す場合、次のように指定します。 <span class="simptip-position-top" data-tooltip="I'm in top">position top</span> 実際の表示は次のようになります。表示例