div与工具提示相同

Question

你昨天用create tooltip div帮助了我。今天我想扩展它。 我有类似的东西：http://jsfiddle.net/Axjgf/18/

如何更改它以便黄色框出现在我单击的框旁边？例如，如果我点击紫色框，它应该出现在紫色框旁边而不是黑色框。

感谢您的帮助！

Answer 1

请看这里的最后一个例子：Query-Click Doc。使用$（this）获取单击的div属性。

Answer 2

解决方案：

http://jsfiddle.net/genesis/VmXU9/26/

Answer 3

如果要更改覆盖框的颜色，可以为每个较小的框提供自己的单击实用程序。

修改

刚刚意识到你想要改变位置！ ;-)代码是固定的。见下文。

   $("#TWO").click(
        function()
        {
            $("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'blue', 'top' : '-320px'});

        });

    $("#five").click(
        function()
        {
            $("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'purple', 'top' : '-280px'});

        });

    $("#six").click(
        function()
        {
            $("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'yellow', 'top' : '-220px'});

        });

http://jsfiddle.net/jasongennaro/Axjgf/21/

编辑2：

由于问题发生了变化，我编辑了小提琴，删除了背景颜色变化。

$("#TWO").click(
    function()
    {
        $("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-320px'});

    });

$("#five").click(
    function()
    {
        $("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-280px'});

    });

$("#six").click(
    function()
    {
        $("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-220px'});

    });

http://jsfiddle.net/jasongennaro/Axjgf/22/

Answer 4

由于您已经在使用jQuery，我强烈建议您使用jQuery UI库"Position" utility。

它有相当多的有用的小方法来对齐相对于另一个对象的对象。例如，使用该库，您可以将您的点击功能修改为这样的（未经测试）：

$('.click').click(function(){
    $(c) = $(this);
    $('#THREE').position({
        my: 'left top',
        at: 'right center',
        of: $(c)
    });
});