Question

我正在开发一个项目，其中有5个'模块'列表（Module1，Module2 ......等等）。它显示在一个html表中。每个模块都有一些章节，因此当表格中显示模块时，我需要制作一个工具提示，以便当用户将鼠标悬停在模块名称上时，一个小工具提示会显示与之关联的所有章节标题。在实现这个方面非常成功但却停留在控制台显示消息的位置 'Empty string passed to getElementById().'并且工具提示中没有显示任何章节，工具提示会显示“请等待......”。这是我的相同代码，

这是我的jQuery和AJAX，

<link href='jquery-ui.css' rel='stylesheet' type='text/css'>
<script src='jquery-1.12.0.min.js' type='text/javascript'></script> 
<script src='jquery-ui.js' type='text/javascript'></script> 
<script>

$(document).ready(function() {
  // initialize tooltip
  $(".panel-body td").tooltip({
    track: true,
    open: function(event, ui) {
      var id = this.id;
      var split_id = id.split('_');
      var module_id = split_id[1];

      $.ajax({
        url: 'fetch_details.php',
        type: 'post',
        data: {
          module_id: module_id
        },
        success: function(response) {

          // Setting content option
          $("#" + id).tooltip('option', 'content', response);

        }
      });
    }
  });

  $(".panel-body td").mouseout(function() {
    // re-initializing tooltip
    $(this).attr('title', 'Please wait...');
    $(this).tooltip();
    $('.ui-tooltip').hide();
  });
}); 
</script>

和fetch_details.php

 <?php
    $dbhost = 'localhost';
    $dbuser = 'root';
    $dbpass = '';
    $conn = mysql_connect($dbhost, $dbuser, $dbpass);

    if(! $conn ) {
        die('Could not connect: ' . mysql_error());
    }

    echo '';
    mysql_select_db('dbname');

    $moduleid = $_POST['module_id'];

    $sql= mysql_query("SELECT title FROM table WHERE  module_id='$moduleid'");

    $html = '<div>';
    $i = 1 ;
    if( $sql === FALSE ) {
        trigger_error('Query failed returning error: '. mysql_error(), E_USER_ERROR);
    } else {
        while($row = mysql_fetch_array($result)){
            $title = $row['title'];

            $html .= "<span class='head'>"<?php echo $title ; ?> " :</span><span>"" mins</span><br/>";
            $i++;
        }
    }
    $html .= '</div>';

    echo $html;
?>

直到现在我无法找出这个出了什么问题。任何帮助或建议将受到高度赞赏。

Answer 1

工具提示的整个结构必须是这样的：

1）例如，如果你想在td上工具提示，td 标签必须有一个标题（$('td#yourid').tooltip()显示id为#yourid的td标签的标题）。即使您不想要工具提示的标题，也必须在标签内使用它，之后您可以通过ajax返回值更改它。这样：

<table>
    <tr>
        <td id = "tooltip-1" href = "#" title = "Nice tooltip" style="height:100px;width:100px;border:1px solid black;"><td>    
    </tr>
</table>

2）工具提示结构必须如下所示如果你想通过td标签工具提示本身

 <script>
     $(function() {

        $("#tooltip-1").tooltip({
            open: function( event, ui ) {

                var x = $(this);    //this is for getting the tooltip-1 object to later use in ajax call

                $.ajax({
                    type: 'post',
                    url: 'fetch_details.php',
                    data: {
                          'yourdata-name': 'yourdata'
                        },
                     success: function(html){
                        x.tooltip({
                            content: html
                            });

                     }

                    });

                }
            });
     });
  </script>

因此你必须在x之类的变量中放置你想要工具提示的对象，然后在ajax中使用该x指向该对象，这样工具提示将显示ajax返回值的结果

3）工具提示是jquery-ui中的新功能，并且某种程度上与bootstrap不兼容。所以如果你使用bootstrap尝试使用tooltip的bootstrap版本

4）您的代码中存在大量编码错误，例如$html .= ""<?php echo $title ; ?> " :"" mins ";的语法完全错误。例如您无法在另一个<?php ?>内使用<?php ?>。

我的建议是首先运行我的代码并将一个简单的字符串从fetch-details.php回显到ajax成功函数，看看这个结构是否有效，然后你可以根据这个结构来操作你的代码

因为你提供了很少的关于你的代码的信息和给出的错误（按行），这就是我能做的所有帮助。我希望这些信息可以帮助您完成计划

工具提示不显示结果

1 个答案: