web-dev-qa-db-ja.com

同じ要素上に表示されるツールチップ+情報ツールチップ

ユーザーがクリックしてそれらの値でフィルターできるいくつかの項目テキストを含むテーブルがあります。たとえば、ユーザーがユーザー名をクリックすると、そのユーザー名を含む行のみがテーブルに表示されます。

これは、Githubでの動作と同様の動作です issues forum 。したがって、問題を開いた人などでフィルタリングできます。

ここで、ツールチップに追加情報を表示する必要があるときに問題が発生します。今回は、クリックのアクションを示す代わりに、テキスト自体に関する追加情報を追加する必要があります。たとえば、私がユーザーIDの場合、ツールチップにはユーザー名も表示されます。または、名前の場合はその説明。

同じ要素に対する2つのツールチップのこの考えにどう対処しますか？

enter image description here

interaction-designweb-apptablestooltips
2
Steve

ヒントとタイトルおよび説明を表示する場合は、「スーパーツールチップ」または別の用語でaを使用することをお勧めします "popover。"これらのアイテムを使用すると、より広い領域で明確なタイトル「{item}によるフィルター」と短い説明を付けることができます彼らがフィルタリングするものへの追加の助け。

http://www.nngroup.com/articles/best-application-designs/http://getbootstrap.com/javascript/#popovers

複数のツールチップを同時に使用するよりも、このルートを使用することをお勧めします。ポップアップがコンテンツを整理し、フィルタリングしようとしているアイテムに焦点を合わせているため、ツールチップが何を参照しているかについて混乱の可能性はありません。

2
Cody Brantley

説明情報のあるアイテムの横にツールチップを追加してみませんか？

enter image description here

これにより、ユーザーは、一部のフィールドに追加の情報が関連付けられていることを認識し、それに応じてそれぞれのフィールドを選択できます。

1
JonW

ユーザー名フィルタが動作している場合はツールチップに名前が表示され、そうでない場合はツールチップのその部分は空白のままになるようにツールチップを記述できます。

疑似コード

tooltipText = "filter by this"
filteredTip = "filtered by: "
if the filterStatus is set (if a user has clicked/touched a column value which is filterable)
AND
if that value is == userName

tooltipText = filteredTip + userName

より一般的な解決策を達成することができます

filterName = colValFilterName

tooltipText = filteredTip + filterName

したがって、列が日付である場合、フィルターされたツールヒントは

フィルター：日付

そして、ユーザー名の列

フィルター方法：ユーザー名

1
deemyBoy