原型設計工具Axure RP新手教程（十二）：工具提示

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在本教程中，您將學習如何創建將鼠標懸停在頁面上的元素上時出現的工具提示。您將通過兩種探索方法來做到這一點：Axure RP的內置工具提示功能（用于創建瀏覽器樣式的工具提示）以及Mouse Hover事件（可用于顯示使用小部件創建的自定義工具提示）。（點擊此處可查看本教程視頻操作）

內置工具提示功能

小部件設置

• 打開一個新的RP文件，然后在Pages（頁面）窗格中雙擊Page1（頁面1）以在畫布上將其打開。

• 將一個占位符小部件從Libraries（庫）窗格拖到畫布上。

添加工具提示文字

• 選擇占位符，然后切換到Interactions（交互）窗格。
  

• 在窗格的右上角，單擊More Interactions（更多交互）圖標。
  

• 在出現的菜單頂部，在工具提示字段中進入This is a tooltip！。
  

預覽頁面

• 預覽頁面并將光標懸停在占位符上以顯示工具提示。

• 將鼠標移離占位符，工具提示將再次消失。

提示：以這種方式創建的工具提示的樣式完全由Web瀏覽器控制。 如果您需要使工具提示看起來不同，請按照下一部分中的步驟創建自定義工具提示。

鼠標懸停時顯示的自定義工具提示

• 打開一個新的RP文件，然后在Pages（頁面）窗格中雙擊Page1（頁面1）以在畫布上將其打開。

• 從Libraries（庫窗格中將占位符小部件和標簽小部件拖到畫布上。

將標簽小部件上的文本設置為This is a tooltip！。

• 通過選擇標簽小部件并單擊Style（樣式）窗格或樣式工具欄中的Hidden（隱藏）圖標來隱藏標簽小部件。

在占位符的鼠標懸停事件中顯示工具提示

• 用占位符的鼠標顯示工具提示選擇占位符，然后在Interactions（交互）窗格中單擊New Interaction（新建交互）。

• 在出現的列表中選擇Mouse Hover（鼠標懸停）事件，然后選擇Show/Hide（顯示/隱藏）操作。

• 在Target（目標）下拉列表中選擇標簽小部件，然后在其下方保留顯示。

• 單擊確定以保存操作。

使用占位符的鼠標退出事件隱藏工具提示

• 在仍選擇占位符的情況下，再次單擊New Interaction（新建交互）。

• 選擇Mouse Exit（鼠標退出）事件，然后選擇Show/Hide（顯示/隱藏）動作。

• 再次定位標簽小部件，然后選擇其下方的Hide（隱藏）。

• 單擊確定以保存操作。

預覽頁面

• 預覽頁面，然后將光標懸停在占位符上。大約一秒鐘后，將出現自定義工具提示。

• 將鼠標移離占位符，工具提示將再次消失。

附加信息和提示

要顯示或隱藏帶有動畫的自定義工具提示，請在顯示/隱藏操作的動畫下拉列表中選擇一個。

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。