在鼠标悬停图像时显示带有 PHP 变量的新图像/窗口


Displaying a new image/window with PHP variables when you rollover an image

当我第一次问如何实现这样的事情时:http://backpack.tf/(将鼠标悬停在任何项目上)我被指向JQuery。

然后我尝试通过使用来实现相同的目的; http://jqueryui.com/tooltip/

我能够创建窗口,但我不知道如何设置它,以便它显示$object级>级或其他类似变量。

我比尝试; http://stevenbenner.github.io/jquery-powertip/

我再次能够创建工具提示。它还允许您使用 data-powertip="" 标记创建工具提示。喜欢这个;

<a href="/some/link" data-powertip="<table id='popup'><tr><td>Name</td><td>&nbsp;</td></tr><tr><td>Price</td><td>&nbsp;</td></tr></table>">Some Link</a></div>

但是,我仍然无法将我的变量放在那里。我正在使用echo将其打印到HTML正文中,并且所有引号都开始成为问题。

请帮我解决这个问题。如何创建令人眼花缭乱的表格,例如将鼠标悬停在此页面中的项目上:http://backpack.tf/

您可能需要转义引号。

例如,(假设您的工具提示插件通过显示属性中的一些数据来工作),请尝试以下操作:让你的html元素对属性like使用双引号(假设它对工具提示数据使用数据工具提示,你需要将其更改为插件使用的任何内容。

<img data-tooltip="your data will go here" ... >
                  ^                      ^
               Used double quotes for attribute

您将使用单引号从 PHP 中回显出来,因为那里有双引号,例如:

echo  '<img data-tooltip="your data will go here" ... >';

现在你的问题是你需要把html放在那个属性中,幸运的是你也可以对html属性使用单引号,但不幸的是,你也使用单引号来回显php。

你需要做的是转义内部引号!比如:

echo '<img data-tooltip="<span class=''some-css-class''>Some Text '.$somePhpVariable.'</span>" ....>';

你用反斜杠转义你的引号。您将看到堆栈溢出代码突出显示器将正确突出显示上述代码。