2017-09-16 85 views
0

我有許多形狀,當我將鼠標懸停在它們上方時,我想要顯示瀏覽器工具提示。但是,由於它們包含圖像和標題文本,因此它們在每個內容上都重複相同的工具提示,因爲它們在Z順序中高於形狀。重複使用工具提示文本

我希望能把它們放在<defs>這樣我可以重新使用它們。例如:

<defs> 
<title id='t1'>This is my tooltip</title> 
</defs> 

<image ...etc...> 
<use xlink:href="#t1"/> 
</image> 

但這不起作用。儘管聽起來像是一個相當明顯的用例,但我猜測defs只對圖形元素有所幫助。真的嗎?有另一種方法可以做到這一點嗎?

+0

defs不適用於工具提示。只需重複文本。 –

+0

根據https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs(在描述性元素下),標題元素可以在defs中出現,所以我不確定它是否是bug 。 – ACProctor

+0

我必須使用此Z順序,因爲這些形狀具有背景色,並且不能位於文本或圖像的前面。 此外,重複可能很重要,如果我有一個包含圖像和標題的矩形,並且圖像已自動調整大小以適合可用高度,則有三個區域可觸發工具提示:在圖像上,在文字上,在圖像的任何一邊(矩形仍然可見)。 – ACProctor

回答

0

如果我包含CSS text { pointer-events: none; },爲我的矩形字幕(或任何文本)提供相同的工具提示是不必要的。

在整個組合形狀上覆制工具提示可以通過在它們上面放置一個透明矩形並給出一個(單一實例)工具提示來完成。