Question

我使用javascript创建了一个工具提示，并使用该工具提示创建了一个html页面。这是我的工具提示：

$(document).ready(function () {
//Tooltips
$(".tip_trigger").hover(function (e) {
    tip = $(this).find('.tip');
    var tipText = $(e.target).attr('ti');
    tip.html(tipText);
    tip.show(); //Show tooltip
}, function () {
    tip.hide(); //Hide tooltip        
}).mousemove(function (e) {
    var mousex = e.pageX + 20; //Get X coodrinates
    var mousey = e.pageY + 20; //Get Y coordinates
    var tipWidth = tip.width(); //Find width of tooltip
    var tipHeight = tip.height(); //Find height of tooltip

    //Distance of element from the right edge of viewport
    var tipVisX = $(window).width() - (mousex + tipWidth);
    //Distance of element from the bottom of viewport
    var tipVisY = $(window).height() - (mousey + tipHeight);

    if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
        mousex = e.pageX - tipWidth - 20;
    } if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
        mousey = e.pageY - tipHeight - 20;
    }
    tip.css({ top: mousey, left: mousex });
});
});

这是HTML：

<div class="container">
    <h1><span>Simple Example</span></h1>
<map name="Koala" class="tip_trigger">
<area ti="This is the left eye" shape="rect" coords="373,365,404,402" href="#" />
<area ti="Right Eye" shape="rect" coords="641,405,681,448" href="#" />

    <div class="tip"></div>

我希望数据库值显示“ti”是... ex的位置。 ti =“数据库值” 如何才能做到这一点？我将使用MySQL和php。所有的帮助，我将非常感激。

Answer 1

在mysql中创建一个帮助表：

CREATE TABLE `help` (
  `helpID` varchar(100) NOT NULL,
  `helpText` text NOT NULL,
  UNIQUE KEY `helpID` (`helpID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

对于通用工具提示，请在您需要帮助提示的页面上输入此html：

<span id="productSKUHelp" class="helpTip questionMark"></span>

由于您希望在光标位于特定位置时显示工具提示，您应该能够使用mousemove功能并调用showTip。

添加以下JQuery：

  function showTip(thisTip){
    var postdata = {
      helpTip: thisTip.attr('id')
    };
    $.ajax({
             type    : "post",
             url     : "/getHelpRPC.php",
             dataType: "html",
             data    : postdata,
             success : function(data){
               if(data.length > 0){
                 var origContent = thisTip.html();
                 thisTip.removeClass("questionMark").addClass('helpTipBox');
                 thisTip.html(data);

               }else{
                 $('#helpTipBox').html("error");
               }
             },
             error   : function(xhr, textStatus, error){
               console.log(xhr.statusText);
               console.log(textStatus);
               console.log(error);
             }
           });

  }

  $(document).on('mouseenter', '.helpTip', function(){
    var thisTip = $(this);
    helpTipTimer = setTimeout(function(){
                                showTip(thisTip);
                              },
                              1000);
  })
  $(document).on('click', '.helpTip', function(){
    showTip($(this));
  })
  $(document).on('mouseleave', '.helpTip', function(){
    clearTimeout(helpTipTimer);
    $(this).html('').removeClass('helpTipBox').addClass('questionMark');
  });

添加以下CSS：

.helpTip{
  padding-left:3px;
  z-index:900;
}

.questionMark:after{
  color:maroon;
  cursor:pointer;
  content:"?";
  top:2px;
  position:relative;
  padding:0 3px;
}

.helpTipBox{
  padding:5px;
  background-color:#97abcc;
  position:absolute;
  curson:text;
}

创建getHelpRPC.php RPC：

<?php
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB);

if($mysqli->connect_errno){
    printf("Connect failed: %s %s %s\n", $mysqli->connect_error, __FILE__, __LINE__);
    exit();
}

$helpID = $_POST['helpTip'];
if($helpID != ""){
    $querystr = "SELECT helpText FROM help WHERE helpID ='" . $mysqli->real_escape_string($helpID) . "'";
    $res = $mysqli->query($querystr);
    $rowCount = $res->num_rows;
    if($rowCount > 0){
        $row = $res->fetch_object();
        echo $row->helpText;
    } else {
        echo "error selecting help.";
    }
}

现在您需要做的就是在span中创建一个唯一的id并将相应的记录添加到表中。

从数据库中检索值并在工具提示中显示

1 个答案: