如何防止標題屬性顯示工具提示？

我正在開發一個使用Angular和Semantic-UI的Web應用程序。當用戶懸停一些元素時，我使用Semantic-UI的Popup來顯示時尚的工具提示。無論如何我必須添加title屬性才能符合A11Y（WCAG 2.0）並使屏幕閱讀器閱讀title屬性的文本內容。如何防止標題屬性顯示工具提示？

正如你可以找出這種方式，我得到了一些元素的雙重工具提示。

你知道一種方法使title屬性保持文本並阻止它顯示彈出？

我不想刪除文本，所以我不能使用的jQuery提供removeAttr方法...

來源

2017-09-06 smartmouse

難道你不能只改變當前綁定到title屬性的Semantic-UI的Popup函數來綁定到另一個屬性如語義標題嗎？ –

語義UI的彈出功能不會綁定到標題屬性。無論如何，這不會解決問題，因爲title屬性仍然可以顯示。 – smartmouse

有沒有方法來禁用默認的瀏覽器的行爲，這是顯示title屬性爲「工具提示「在瀏覽器本身。

你需要求助於一些JavaScript，它甚至可以作爲標題設置爲空懸停，並更換其對小鼠進行簡單....

onmouseover="this.setAttribute('data-title', this.title);this.title = ''" 
onmouseout="this.setAttribute('title', this.getAttribute('data-title')"

這將設置標題爲空（因此「禁用」工具提示），並將其存儲在數據屬性中。那麼在mouseout上它會把標題放回去（這意味着你的語義UI的東西仍然會工作）。您需要將其整合到代碼中的正確位置。

來源

2017-09-06 13:45:00 Stuart

如何防止標題屬性顯示工具提示？

回答

相關問題