Как добавить всплывающую подсказку по изображению с использованием поверхностей

Question

Ниже приведен код, который я пробовал и его не работает.

<p:column> 
<img border="0" src="../images/xxx.png"id="stage1" 
    alt="xxxx" width="300" height="106"></img> 
<p:tooltip for="stage1" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mouseout"> 
xxxxxxxx 
</p:tooltip> 
</p:column> 

Answer 1

Если вы хотите использовать p:tooltip с изображением, вы должны использовать p:graphicImage, чтобы загрузить ваш изображение, а не тег img (произошло со мной несколько раз с PF 4.0). Если ваш p:tooltip отображает только текст, было бы лучше использовать атрибут value: генерируемый HTML меньше ... «громоздкий». Обратите внимание, что по умолчанию showEvent является «mouseover», а по умолчанию hideEvent - «mouseOut».

<p:column> 
    <p:graphicImage id="stage1" value="images/xxx.png" alt="xxxx" 
       style="border:0; width:300px; height:106px;"/> 
    <p:tooltip for="stage1" showEffect="blind" hideEffect="explode" value="xxxxxxxx"/> 
</p:column> 

Answer 2

Я думаю, вы его почти сразу

<p:column> 
<img border="0" src="../images/xxx.png"id="stage1" 
    alt="xxxx" width="300" height="106"></img> 
<pe:tooltip for="stage1" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mouseout"> 
xxxxxxxx 
</pe:tooltip> 
</p:column> 

Это pe:tooltip не p:tooltip