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

如何使用primefaces在图像上添加工具提示

2 个答案: