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"これはどのように行うことができますか？phpと一緒にMySQLを使用します。私が非常に感謝するすべての助け。

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.";
    }
}

あとは、スパンに一意の ID を作成し、対応するレコードをテーブルに追加するだけです。

于 2013-08-03T23:45:10.927 に答える