Retrieving a value from a database and display in tooltip - php

Question

I have created a tooltip using javascript and have an html page using that tooltip.
Here is my tooltip:
$(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 });
});
});
Here is 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>
I want the database value to display where "ti" is... ex. ti="database value"
How can this be done? I will be using MySQL along with php. All help I will be very grateful for.

Answer 1

Create a help table in mysql:
CREATE TABLE `help` (
`helpID` varchar(100) NOT NULL,
`helpText` text NOT NULL,
UNIQUE KEY `helpID` (`helpID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
For a generic tooltip, on the page where you want the help tip, put this html:
<span id="productSKUHelp" class="helpTip questionMark"></span>
Since you want the tooltip to appear when your cursor is in a certain spot, you should be able to use your mousemove function and call showTip.
Add the following 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');
});
Add the following 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;
}
Create the 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.";
}
}
Now all you need to do is create a unique id in the span and add the corresponding record to the table.