0

我使用 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”在哪里......例如。ti="database value" 怎么做？我将使用 MySQL 和 php。我将非常感谢所有帮助。

4

1 回答 1

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 并将相应的记录添加到表中。

于 2013-08-03T23:45:10.927 回答