Question

我在这里有一个名单列表，并使用jquery的工具提示在悬停时显示个人资料照片。但是，当我悬停时，图像显示得太远，并且与屏幕保持对齐。

任何人都可以给我一个想法吗？

http://reveillon.formationweb.net/after.php

我试图在这里做一个小提琴：http://jsfiddle.net/JeremyCh/ZZzG7/但是这里的图像甚至都不可见，上面的链接是after.php，图像在左边看到。

<ul id="quiviennent">
            <li><a id="sabah" title="">Sabah</a></li>
            <li><a id="elicia" title="">Elicia</a></li>
            <li><a id="celine" title="">Celine</a></li>
            <li><a id="audrey" title="">Audrey</a></li>
            <li><a id="bruno" title="">Bruno</a></li>
            <li><a id="saidou" title="">Saidou</a></li>
        </ul>

$( "#sabah" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/sabah.jpg" />' });
    $( "#elicia" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/elicia.jpg" />' });
    $( "#celine" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/celine.jpg" />' });
    $( "#saidou" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/saidou.jpg" />' });
    $( "#bruno" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/noimg.jpg" />' });
    $( "#audrey" ).tooltip({ content: '<img src="http://reveillon.formationweb.net/images/noimg.jpg" />' });

#quiviennent li a { cursor: pointer; }

由于杰里米

Answer 1

您可以使用position option指定工具提示相对于其附加元素的显示位置。

例如

$( "#sabah" ).tooltip({ 
      content: '<img src="http://reveillon.formationweb.net/images/sabah.jpg" />',
      position :  { my: "left+100 center", at: "left center" }
});

将照片略微放在列表右侧。

jquery工具提示，工具提示出现太多

1 个答案: