Drop Down List Tooltips on Select options – 在下拉列表 上的選擇加上 工具提示

還是在提升公司網頁的使用者體驗工作
今天想和大家分享的是..
原來在網頁上的 “Drop Down List / 下拉列表” 上加上 “Tooltips / 工具提示
應該是可以增加使用者體驗的..
特別是當你的網頁上有很多已經有很多資料或 已然密密麻麻的時候..
要在頁面上再加上一段文字去解釋 這個DropDownList的選項 有什麼意思…

解決方法十分簡單..
我們可以使用 HTMLTitle tag 來實現..

解決方法

<select id="Food Category">
<option value="fruit" title="Fruit is...">Fruit</option>
<option value="meat" title="This is meat option...">Meat</option>
<option value="vegetable" title="Vegetable is...">Vegetable</option>
</select>

Select Option / DropDownList Tooltips demo

Demo
http://sharechiwai.com/demohtml/selectoption_tooltips

Hope you find it useful

Leave a Reply