PowerApps｜マウスオーバー時にヒントテキストを表示させたい｜基礎＆応用編

マウスオーバー時にヒントテキストを表示させたい

アプリを以下箇条書きのような仕様にしたいと思ったことはありませんか？

結論から申し上げます。「全て可能」です。

1. 【基礎】入力補助（ヒントテキスト）のような機能を用意したい
2. 【基礎】マウスオーバー（マウスホバー）時に入力補助を表示させたい
3. 【応用】入力補助は小さいのでもう少しインパクトのあるものにしたい

かんたんな動画を用意してみました。（約40秒です）イメージ通りであれば以下記事を読み進めてください。

ポイントは以下2点です。先にこの2つの要素を説明してから動画のような環境を構築していきます。

• Tooltipプロパティ
• 変数

関連記事

【初心者向け】今回は変数を使っています。まずは「変数とは何か？」が分からない方は必読です。

【中級者向け】変数を使ってテキストラベルをコントロールしています。

【上級者向け】Navigate関数のパラメータの中で変数を作成、運用しています。

関連書籍

おすすめの書籍を紹介しておきます。

電子書籍はこちらです。電子書籍の方がおすすめです。

Tooltipプロパティ

Microsoftの公式ドキュメントから説明を引用しました。

Tooltipプロパティはコントロールにマウスを合わせると表示されるテキストを設定することができます。

表示されるテキストは「ヒントテキスト」だったり「ヒントメニュー」と呼ばれることがあります。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

• 音声、ボタン、カメラ、チェックボックス、ドロップダウン、HTML テキスト、画像、ラベル、リスト ボックス、マイク、PDF ビューア―、ペン入力、ラジオ、評価、スライダー、テキスト入力、タイマー、トグル、ビデオ の各コントロールに適用されます。

Microsoft Learn Challenge：Power Apps のコア プロパティから抜粋

以降の解説記事では3つのコントロールに対しTooltipプロパティを設定します。

• テキストラベル
• アイコン（はてなマーク）
• テキスト入力（テキストボックス）

変数

変数の説明についてはこちらの記事をご覧ください。

時間が無い方はこれだけ覚えてください。変数は「一時的に値を入れておく箱」です。

動画のようなヒントテキストを表示させる環境を構築してみる

動画と同じような環境を構築していきます。ヒントテキストを適宜表示させる環境です。

準備

PowerAppsでアプリを構築できる環境を用意していただきます。続いて以下コントロールを用意してください。

• テキストラベル（必要事項入力　と記入するラベル）
• アイコン（はてなマーク）
• テキストラベル（はてなマークをクリック時に表示させる仕様）
• テキスト入力（テキストボックス）

あとは必要に応じて用意してください。

基本的には③のテキストラベルは表示されていません。はてなマークをクリックしたときだけ表示されます。

再度はてなマークをクリックすると非表示になります。この辺りが今回のポイントになりそうですね。

各種コントロールへの値を用意する

各種コントロールのプロパティに用意する値を並べました。そのまま貼り付けていただくだけでOKです。

ポイントは「!」マーク

準備の段階でポイントだろうと予想していた③のテキストラベルを表示／非表示にさせる方法を紹介します。

結論から申し上げますと③のラベルの表示／非表示は②のはてなマークでコントロールしています。

②はてなマークのOnSelectプロパティで変数を用意する際「!」マークを使っていますね。これがポイントです。

「!」マークは「論理否定演算子」と言います

複雑に書いてますが論理否定演算子というのは現在の値を反転する役割を持っています。

加えて論理否定演算子の「！」を使う時は値にTrueかFalseをとると覚えてください。

②のアイコンと③のテキストラベルとの関係

②のアイコンのOnselectプロパティには変数showを設定しました。論理否定演算子の「!」を使っています。

続いて③のVisibleプロパティです。ここには変数showが入力されていますね。

この環境で②のはてなマークのアイコンをクリックするとどうなるでしょうか？

参考：Visibleプロパティは「Trueで常に表示」、「Falseで常に非表示」です

つまり②のはてなマークをクリックして得られた変数showの値をもって表示／非表示が決まる事になります。

• はてなマークのクリック前に変数showの値がTrueの際はクリックでFalseに変える
• はてなマークのクリック前に変数showの値がFalseの際はクリックでTrueに変える

「!」を使うと値はTrueかFalseでしたよね。この機能を使ってラベルの表示をコントロールしている次第です。

環境構築に成功&課題もクリアしました

これで冒頭の動画と同じ環境を構築できます。同じく冒頭で提示した課題も全てクリアしましたね。

1. 【基礎】入力補助（ヒントテキスト）のような機能を用意したい
2. 【基礎】マウスオーバー（マウスホバー）時に入力補助を表示させたい
3. 【応用】入力補助は小さいのでもう少しインパクトのあるものにしたい

まとめ

各種コントロールを組み合わせてマウスオーバー時にヒントテキストを表示させるという環境を構築しました。

実際に記入される値に対して直接アプローチすることはできない機能ですがユーザビリティ向上が望めます。

アプリを使用するグループによっては整理された情報を積み上げることができるようになるかもしれません。

ヒントテキストなどは使用するグループにあった規制を用いることを心がけてください。

参考：状況によってはさらに強い規制を設けることも可能です

言い方は良くないのですがITリテラシーが低いグループでは今回の縛りでは少々指示が弱い気がします。

そんな時はテキストに入力される値自体を読み取って問題があれば次の作業に進めなくすることも可能です。

こちらの記事をご覧ください。