ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning

2024/04/13 7 users CSS Anchor Positioning 表示位置

ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示さ... 続きを読む

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

2024/03/06 206 users CSS HTML デザイ div要素一つ グラデーション

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザイ... 続きを読む

JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】 - Qiita

2022/09/27 36 users Qiita ダイアログ JavaScript

Help us understand the problem. What are the problem? 続きを読む

［Windows］＋［Shift］＋［S］キーだと消えてしまうメニューやツールチップをキャプチャーする【Windows 10／11】

2022/03/23 10 users Shift Windows キー 画面キャプチャー メニュー

社内アプリケーションのマニュアル作成などでスクリーンショット（画面キャプチャー）を撮らなければならないこともあるだろう。その際、［PrintScrn］キーで全画面をキャプチャーしたり、［Windows］＋［Shift］＋［S］キーを利用してウィンドウのみをキャプチャーしていたりするのではないだろうか。 しかし、メニュー... 続きを読む

WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI

2021/12/06 19 users ライブラリ ナビゲーション 衝突 Floating UI 実装

WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。 フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。 Floating UI ... 続きを読む

目次を入れるプラグイン

2021/12/01 25 users 目次 CSS 手書き プラグイン HTML

この記事を読むのに必要な時間は約 4 分です。 (専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。 ツールチップの機能については、こちら) 目次に関してはこれまでも記事を書いてきましたが、手書きでHTMLとCSSで書くよりプラグインやテーマに付属した機能を使う方が楽です。... 続きを読む

Windows 11、バッテリーレベルが 100 % を超えても充電し続けるバグ | スラド IT

2021/11/08 6 users reddit BetaNews スラド パク バッテリー

Windows 11 でバッテリーレベルが 100 % を超えても充電し続けるバグが報告されている (BetaNews の記事)。 Reddit に投稿されたスクリーンショットによると、通知アイコンのツールチップでバッテリーレベルが 103 % と表示されている。この時点で完全に充電されたと表示されていたが、その 25 分後にはバッテリーレベル... 続きを読む

ボタンで閉じられる jQueryツールチップの作り方 - 虎の穴開発室ブログ

2020/07/10 12 users 開閉 実装 穴ラボ アイドル ライブ

こんにちは！そろそろ推しのアイドルのライブが恋しくなってきた、虎の穴ラボのS.Sです。 jQueryを使って簡単にツールチップを実装することが出来ますが、これに一手間加えて、ボタンで開閉ができるツールチップを作ってみましたので、今回はその作り方をご紹介します。 ツールチップを実装 まずは、特別なことは何もせ... 続きを読む

【CSS】ツールチップをHTMLとCSSだけで簡単に作る │ ジャングルオーシャン

2019/03/08 38 users ジャングルオーシャン CSS マウスカーソル HTML 要素

ツールチップとは ツールチップとはある要素にマウスカーソルを合わせたときに 補足説明などの要素を表示するものだよ。 具体的なイメージはサンプルデモページを見てみてね。 サンプルデモを見る HTMLとCSSだけで簡単に実装できるからぜひ実装してみてね。 それじゃそれぞれのソースコードを見ていこう。 1.テキストで... 続きを読む

clipboard.jsでテキストをクリップボードにコピーする方法 | Webクリエイターボックス

2019/03/07 14 users clipboard.js RGB RGB値 Vue.js 説明

2019年3月7日 JavaScript 以前Vue.jsでカラーコードからRGB値にサクッと変換する方法という記事で紹介した、「Quick HEX to RGB」では、値をクリックすればクリップボードにコピーする機能をつけています。これはclipboard.jsを使っているので、基本的な使い方と、あまり説明のないツールチップの加え方を紹介します。 ... 続きを読む

Vue.jsベースのオープンソースなUIコンポーネントライブラリ・「Element」 | かちびと.net

2018/09/13 20 users Element タイポグラフィ OSS レーティング アラート

Element ElementはVue.jsをベースとしたOSSのUIコンポーネントライブラリです。フォームやレイアウト、ボタンやタイポグラフィはもちろん、タイムピッカーやスライダー、レーティングなど、より応用の効くフォームのアイテムやアラート、ダイアログ、ドロップダウンやツールチップ等、よく使われるUIなど、多くのシーン... 続きを読む

[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js | コリス

2018/03/01 39 users デモ アニメーション 形状 タッチ操作 コリス

シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.jsでは、さまざまなツールチップを簡単に実装できます。 デモにはそれら... 続きを読む

Bootstrap 4向けのモダンで軽量なUIキット・「Shards」 | かちびと.net

2017/11/09 11 users モーダルウインドウ Bootstrap バッチ UIキット

Shards ShardsはBootstrap 4用のモダンで軽量なUIキットです。ナビゲーションやツールチップ、フォーム周り、モーダルウィンドウやバッヂ、アラート、ボタン、カードなどのコンポーネントが揃えられています。これらのUIの為のCSSは圧縮版で12KBほどと軽量ではありますが、Bootstrapベースなので軽量と言えるかは判断が分かれそうです。Bootstrapらしい綺麗なスタイルで良い... 続きを読む

UIデザインにおける適切なツールチップの使い方 | UX MILK

2017/04/13 28 users UX MILK UIデザイン 使い方 Nick オブジェクト

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 ツールチップは、UIの中で直接説明がなされていない、見慣れないオブジェクトをユーザーが理解する手助けをするものです。ツールチップには、UIをすっきりさせるという大きな効果があります。ユーザーが情報を必要なときに、最小限の動作で参照することができるようになるのです。ま... 続きを読む

【大賞候補】見えているのにコピーできないテキストをコピーする「PointClip」 - 窓の杜

2016/12/08 16 users キャレット 大賞候補 テキスト Vista カーソル

「PointClip（ポイントクリップ）」は、マウスのカーソル位置にあるコントロールからテキストを取得できるツール。Windows 2000/XP/Vista/7に対応するフリーソフトで、編集部にてWindows 10でも動作を確認した。作者のWebサイトからダウンロードできる。 　ウィンドウタイトルやラベル、ツールチップなどのコントロールに書かれているテキストは、キャレット（カーソル）がないため... 続きを読む

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ | コリス

2016/03/17 412 users コリス Bootstrap Flexbox class 単位

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap ... 続きを読む

一定時間表示して消える通知用jQueryプラグイン「jQuery Toast」:phpspot開発日誌

2014/11/18 23 users phpspot開発日誌 モーダル jQueryプラグ 挙動

Kamran Ahmed 一定時間表示して消える通知用jQueryプラグイン「jQuery Toast」。 最近流行りの通知方法で、複数の通知を表示することも可能。カスタマイズ性が豊富で、色や表示時間、コールバック等細かな挙動の指定が可能です。 関連エントリ ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 ページ内にどんどん通知アラートを設定できるjQueryプラグ... 続きを読む

ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」:phpspot開発日誌

2014/06/05 37 users モーダル デザインバリエーション Bootstrap 通知

ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 2014年06月05日- jBox by Stephan Wagner ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 これ１つでかなり多機能。ツールチップやモーダル、通知、それぞれに色々なデザインバリエーションがあってデザイン・アニメーション自体もカッコいい Bootstrapを使うま... 続きを読む

レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」:phpspot開発日誌

2014/03/05 19 users レスポンシブ phpspot開発日誌

レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 2014年03月05日- Responsive and Mobile-Friendly Tooltip ? Osvaldas Valutis レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 ツールチップというと、どうしてもP... 続きを読む

[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip | コリス

2013/11/07 96 users Sass コリス フェード class CSS

classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 Simptip Simptip -GitHub Simptipのデモ Simptipの使い方 Simptipのデモ ツール... 続きを読む

Simptip - 要チェック！スタイルシートだけで実現するツールチップ|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/11/07 18 users CSS link rel ソフトウェア エンジニア ヘルプ

スタイルシートだけで実現しますよ！ 訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを組み込んだり複雑な指定をしないといけないのでは使い勝手が悪いですよね。 そこで使ってみて欲しいのがSimptipになります。CSSを読み込むだけで使えてしまうツールチップです。 使い方は簡単で、Simptipを読み込むだけです。 <link rel="... 続きを読む

[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI | コリス

2013/09/16 45 users コリス DOM extensions スクリプト jQuery

ドロップダウン、モーダルウインドウ、ポップアップ、ツールチップなど、最初は可視状態にないDOMをコントロールしてUIを拡張するjQueryのプラグインを紹介します。 「Shadow DOM besed UI extensions」って表現するセンス、いいですね。 Shadow UI Shadow UI -GitHub Shadow UIのデモ Shadow UIの使い方 Shadow UIのデモ ... 続きを読む

[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip | コリス

2013/05/07 266 users 扇形 コリス CSS ポパー かわいい

マウスのホバーやクリックで、ふわりとアニメーションで扇形にツールチップが表示されるスタイルシートのデモを紹介します。 デモは、2種類あります。 まずは、一つ目のデモ。 Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular ... 続きを読む

Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI - かちびと.net

2013/03/05 94 users Twitter Bootstrap net ベース デザイン

Twitter Bootstrapベースに作られたシンプルでフラットなデザインのUIキット・Flat UIのご紹介。今年はこの手のスタイルよく見かけますけど、確かに見やすいですね。 Flat UI フラットなデザインで見やすい印象です。このまま使うのはアレですけど参考にはなりました。 ドロップダウンメニューとかフォーム周りとか。 ツールチップとかとか。Bootstrapに含まれているコンポーネント... 続きを読む

まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ「w2ui」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/03/03 414 users ネイティブ w2ui エンジニア ソフトウェア グリッド

w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ... 続きを読む