显示动态内容的工具提示

Question

我有下面的HTML代码，它显示了包含信息的动态行数，然后有一个图像链接，我单击该链接可以根据字段获取一些关于单击的行的特定信息。

            echo "<td>".$compi['Competence_ID']."</td>";
            echo "<td><p style='text-align: center;'>".$compi['Competence_Group']."</p></td>";
            if(isset($compi['Competence_class'])){echo "<td>".$compi['Competence_class']."</td>";}else echo "<td><p style='text-align: center;'>-</p></td>";
            echo "<td>".$compi['Competence_Description']."</td>";
            echo "<td class='evaluation'>";
                echo "<select class='ownlevelselect' id='ownlevelselect-.".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
                   if (isset($compi['ownlevel']) && $compi['ownlevel']!= '' && !empty($compi['ownlevel']) && $compi['ownlevel']!= 0) {
                      echo "<option selected value='".$compi['ownlevel']."' selected='selected'>".$compi['ownlevel']."</option>";

                    }
                    echo "<option value='' >--</option>";
                    echo "<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>";
                echo "</select>";
                echo $compi['ownlevel'];

// Below are the links I click to view the content
                echo '<a target="_blank" href="'.INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levels='.$compi['Competence_ID'].'">';
                echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
            echo "</td>";
            echo "<td>";

这是可行的，我可以看到相应的信息，根据ID张贴。但是，我想知道是否可以在工具提示中显示这些信息，而不必单击链接并发布ID。下面是我单击图像时从DB检索数据的脚本。

    function fetchlevels($Competence_id){
    $this->query="SELECT * FROM levels WHERE comp_id=".$_REQUEST['levels'];
    $tulos=$this->suoritaKysely();
    return $tulos;
}

Answer 1

简单的回答是:您可以使用ajax完成这一任务。

我们可以在这里提供确切的代码，但你可能想了解这个概念，所以我相信下一个视频教程是一个很好的起点。

youtube视频教程:在MouseOver上加载动态内容

在对视频的描述中，您可以找到到视频教程和与其相关的文件的下载链接。你需要的是例子2。

要使示例正常工作，只需更改配置文件: connect.php和此数据库

--

-数据库：ajax

--

-表data的表结构

创建表如果不存在data ( id int(11) NOT NULL AUTO_INCREMENT，title varchar(45) NULL，fname varchar(45) NULL，lname varchar(45) NULL，主键(id) ) ENGINE=MyISAM默认CHARSET=latin1 AUTO_INCREMENT=11；

--

-表data的倾销数据

在data (id，title，fname，lname)中插入值(1，'Web‘，'Chris'，'Johnson')，(2，'Web Designer'，'Joe'，'Black')，(3，’教师‘，'Jason'，'McIntosh')，(4，’家庭男子‘，’杰克‘，’川口‘)，(5，'Sans Man Card'，'Brett'，'Williams')，(6，“我不知道.”，“Topher”，“Howden”，(7，'Gamer'，'Jason'，'Luzader')，(8，‘翼手’，'Chuck'，'Strong')，(‘篮球运动员’，'Chuck'，'Barkley')，(10，'Singer'，'Marta'，'Zore')；

Answer 2

在代码中

echo '<a target="_blank" compId='$compi['Competence_ID']' href="#">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';

如果上面的PHP代码有问题，请原谅。基本思想是在锚标记的属性上设置id。

 <script>
  $( document ).tooltip({
  items: "img",
  content: function() {
    var element = $( this );
    var parent=element .parent();
    if ( element.is( "img" ) ) {
      var text =  $.ajax({ type: "GET", url: remote_url, async: false, }).responseText;//remoe_url is url of your PHP whenre you have code to return the content in tooltip. You can take id as parent.attr('compId')
      return text;
    }
  }
 });
  </script>