add toolo tips to hyperlink

Paul-D · December 20, 2022

This is not done using a Unix PC or software apps. No class usage.

I have a php web page with columns. The firs one is a hyperlinked date. What I want is when I move the mouse over it, I get a tool tip showing the EntryDate field which is collected in the sql.

dodgeitorelse3 · December 20, 2022

What code have you tried so far?

Paul-D · December 20, 2022

Basic PHP not using oop or classes.

I have a bank style sheet with columbs using a floating div structure

<div>Date</div>div>Money In</div>div>Money Out</div>div>Balance</div>

        <div style="width:150px;height:4px;padding:10px;text-align:right;float:left;text-color:green;clear:both;"><?=$ViewDate?>
	// ADD TOOL TIP $EntryDate
	</div>

$ViewDate is the result of a query and this is iterated through the result of the SQL query. If I could add a tool tip $EntryDate

Edited December 20, 2022 by Paul-D

Paul-D · December 20, 2022

Sorry I gave you the un-linked line. It shoud have been

<div style="width:150px;height:4px;padding:10px;text-align:right;float:left;text-color:green;clear:both;"><a href="StatementEntry.php?ID=<?=$ID?>"><?=$ViewDate?></a></div>

Had a look on line and tried

<div style="width:150px;height:4px;padding:10px;text-align:right;float:left;text-color:green;clear:both;"><dfn title="Test"></dfn><?=$ViewDate?>

That didn't work.

Edited December 20, 2022 by Paul-D

ginerjm · December 20, 2022

You want something to show up onscreen when one hovers over it. You are showing the ViewDate value onscreen but you want a different date to popup during the hover. I don't understand what else you want to happen.

PS - you want a div that is only 4px high? That's pretty small.

kicken · December 20, 2022

If all you want to have is a small text-only tooltip, you can do that just by using the title attribute.

<a href="#" title="The tooltip here">Link text</a>

ginerjm · December 20, 2022

Kicken: I was going to offer the 'title' attribute but wasn't sure that was all the the OP was looking for. Still waiting....

Paul-D · December 20, 2022

No I tried that and it does not work. What I mean by a tool tip is a microsoft tool tip that pops up as a rectangular box of text when the mouse is over it. A kind of help text. This is what I have used kicken's

<a href="StatementEntry.php?ID=<?=$ID?>" title="The tooltip here"><?=$ViewDate?></a>

This is a part of my website that has been up and running since July 2015. I just thought it would help me. This works fine. All I have added to the link is title="The tooltip here"

Edited December 20, 2022 by Paul-D

dodgeitorelse3 · December 20, 2022

Does not work mean you don't see a tooltip at all or you do see a tooltip but it isn't showing the value of $EntryDate?

ginerjm · December 20, 2022

That line you are using could be written as:

echo "<a href='StatementEntry.php?ID=$ID' title='The tooltip here'>$ViewDate</a>";

And this line works fine for me.

And as I asked earlier - is that what you are looking for us to help with (see my earlier.)

Paul-D · December 21, 2022

Thanks for your help. This mostly works. The problem is the variable I retreve for added date is YYYY-MM-DD HH:MM:SS

I have checked this out by echoing it.

Lines 163
$AddDate = $row['AddDate'];
//echo $AddDate; /* 2022-12-20 14:17:00 */
//exit;

However when I use it in the tool tip, the HH:MM:SS is missing

Lines 196
<div style="width:150px;height:4px;padding:10px;text-align:right;float:left;text-color:green;clear:both;">
<a href="StatementEntry.php?ID=<?=$ID?>" title=<?=$AddDate?>>
<?=$ViewDate?></a></div> /* 2022-12-20 Missing HH:MM:SS*/

Here is the full php code.

<?
// Banking Version 1.0.0   22-07-2015   Desmond O'Toole.
error_reporting(E_ALL);
ini_set('display_errors', '1');
require("../secure/SecureFunctions.php");
require("secure/SecureFunctionsBank.php");
session_start();
Session_Init();
$page = "Bank Statement";

if(!isset($_SESSION["Pk"]))
{
  header('Location: index.php');
  exit;
}

$Pk = $_SESSION["Pk"];
if(KeyCheckX($Pk)== 0)
{
  header('Location: index.php');
  exit;
}

$EndTime = KeyTestX($Pk, 0);

if(isRoguebot($Browser) == 1)
  exit;

$_SESSION["K9"] =  isRobot($Browser);

if($_SESSION["current_page"] <> $page && $_SESSION['Event_Log'] == "YES")
{
   // StoreData($page);
   // mailtoX($page,"Desmonds New Site.",""); 
}
$_SESSION["current_page"] = $page;

$filename = filename($_SERVER['PHP_SELF']);
//$Update = date("D d-M-Y H:i", filectime($filename));

$qBalance = GetBalance();
$row = mysql_fetch_array($qBalance);
$Date = $row['EntryDate'];
$Value = $row['BalanceValue'];
$stamp =  strtotime($Date);
$StartDate = date('D d-M-Y' ,$stamp);

$stamp = $stamp + (WEEKS * 5) + (DAYS * 1); 
$EndDataDate = date('D d-M-Y' ,$stamp);

//$QueryDate = date('d-M-Y' ,$stamp);
$qGetAllData = GetAllData($Date);

$curValue = $Value;

$Cash = number_format(MonthlyTakings(CASH) , 2, ".", ",");
$Shops = number_format(MonthlyTakings(SHOPS) , 2, ".", ",");
$Online = number_format(MonthlyTakings(ONLINE) , 2, ".", ",");
$Other = number_format(MonthlyTakings(OTHER) , 2, ".", ",");
$Ebay = number_format(MonthlyTakings(EBAY) , 2, ".", ",");
//$Totals = $Cash + $Shops + $Online + $Other;

$Totals =  number_format($Cash + $Shops + $Online + $Other + $Ebay , 2, ".", ",");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bank Home</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="imagetoolbar" CONTENT="no">
<meta http-equiv="refresh" content="60">
<link rel="stylesheet" href="stylesheets/Library.css" type="text/css">
<link rel="stylesheet" href="stylesheets/LibraryMenu.css" type="text/css">
</head>

<body>

<div id="PageTitle">
	<img src="images/LibraryBanner.jpg" alt="">
</div>

<?
 include('SideMenu.php');
?>

<div id="PageContent">
    <form action="menu.php" method="post">
    <span style="color:blue;"><b>Est: 18-July-2015</b></span>
    <!-- <?=greeting() . "<br>Ends on 1 " . $EndTime?></h3> -->
    <h4><?= "Displayed data up to "  . $EndDataDate?><?="<br>Log on ends on " . $EndTime?>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="DeleteOldData.php"><span style="color:blue">Clear old data</span></a>
    <br>
    <br>Last 30 days: 
    
    <a href="spend.php?ID=0">Total</a> <span style="color:blue;text-decoration:none">&pound;<?=$Totals?> </span>&nbsp; = &nbsp;&nbsp;
    <a href="spend.php?ID=12">Cash</a> <span style="color:blue;text-decoration:none">&pound<?=$Cash?></span>,&nbsp;
    <a href="spend.php?ID=10">Shopping</a> <span style="color:blue;text-decoration:none">&pound<?=$Shops?></span>,&nbsp;
    <a href="spend.php?ID=11">Online</a> <span style="color:blue;text-decoration:none">&pound;<?=$Online?></span>,&nbsp;
    <a href="spend.php?ID=15">Ebay</a> <span style="color:blue;text-decoration:none">&pound;<?=$Ebay?></span>,&nbsp;    
    <a href="spend.php?ID=1">Other</a> <span style="color:blue;text-decoration:none">&pound;<?=$Other?></span>
    <a href="EntryDate.php">Entry Date</a> <span style="color:blue;text-decoration:none"></span>
    
    </h4>
    
    
    </h4>
    <div style="width:850px;padding:0px;float:left;">
        <div style="width:150px;height:10px;padding:10px;float:left;"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date</b>
        </div>
        <div style="width:70px;height:10px;padding:10px;float:left;"><b>Money In</b>
        </div>
        <div style="width:70px;height:10px;padding:10px;float:left;"><b>Money Out</b>
        </div>
         <div style="width:70px;height:10px;padding:10px;float:left;"><b>Balance</b>
        </div>
       <div style="width:100px;height:10px;padding:10px;float:left;"><b>Reason</b>
        </div>
        <div style="width:250px;height:10px;padding:10px;float:left;"><b>Comment</b>
        </div>

        <div style="width:150px;height:4px;padding:10px;text-align:right;float:left;clear:both;"><a style="color:#ae22e2;" href="DataInput.php">* <?=$StartDate?></a>
        </div>
        <div style="width:70px;height:4px;padding:10px;text-align:right;float:left;">
        </div>
        <div style="width:70px;height:4px;padding:10px;text-align:right;float:left;">
        </div>
        <div style="width:70px;height:4px;padding:10px;text-align:right;float:left;">&pound;<?=number_format( $Value,2,'.',',')?>
        </div>
        <div style="width:100px;height:4px;padding:10px;float:left;">
        </div>
        <div style="width:250px;height:4px;padding:10px;float:left;">Brought forward
        </div>
		<?
		while($row = mysql_fetch_array($qGetAllData))
		{
			$stamp =  strtotime($row['EntryDate']);
			$ViewDate = date('D d-M-Y' ,$stamp);
			$CurDate = date('D d-M-Y' ,time());

			$input = '&pound;' . $row['Input'];
			if($row['Input'] == '0.00')
				$input = "";

			$out = '&pound;' . $row['Output'];
			if($row['Output'] == '0.00')
				$out = "";
			
			$reason = GetReasonName($row['Reason']);
			$colorSelect = ColourPicker($row['Reason'],$row['EntryDate']);

			$AddDate = $row['AddDate'];
			//echo $AddDate; /* 2022-12-20 14:17:00 */
			//exit;

			$curValue = $Value + $row['Input'] - $row['Output'];
			
			//$curValue = RestoreDecimal($curValue);
			$DisplayCurValue = number_format( $curValue,2,'.',',');			
			$Value = $curValue;
			$Comment = $row['Comment'];
			$Comment = str_replace("£","&pound;", $Comment);  //  $Comment, "£", "&pound;"
			//$pos = strpos ($Comment, "pound");
			/*if ($pos != false) 
			{
				echo $Comment;
				exit;
			}*/
			
			$ID = TransposeKey($row['Tag']);
			//$ID = $row['Tag'];
			$x = "";
			//if($CurDate == $ViewDate)
			//   $x = "background-color:#cdcccc;";
			// background-color:#6495ed;
		if($colorSelect == "#777777") {
		?>
        <div style="width:150px;height:4px;padding:10px;text-align:right;float:left;text-color:green;clear:both;"><dfn title="Test"></dfn><?=$ViewDate?>
	// ADD TOOL TIP $EntryDate
	</div>
        <? 
	} else { ?>        
        <div style="width:150px;height:4px;padding:10px;text-align:right;float:left;text-color:green;clear:both;">
        <a href="StatementEntry.php?ID=<?=$ID?>" title=<?=$AddDate?>>
	<?=$ViewDate?></a></div> /* 2022-12-20 Missing HH:MM:SS*/
	<? } ?>
               
        <div style="width:70px;height:4px;padding:10px;color:<?=$colorSelect?>;<?=$x?>text-align:right;float:left;"><?=$input?>
        </div>
        <div style="width:70px;height:4px;padding:10px;color:<?=$colorSelect?>;<?=$x?>text-align:right;float:left;"><?=$out?>
        </div>
        <div style="width:70px;height:4px;padding:10px;color:<?=$colorSelect?>;<?=$x?>text-align:right;float:left;">&pound;<?=$DisplayCurValue?>
        </div>
        <div style="width:100px;height:4px;padding:10px;color:<?=$colorSelect?>;<?=$x?>float:left;"><?=$reason?>
        </div>
        <div style="width:250px;height:4px;padding:10px;color:<?=$colorSelect?>;<?=$x?>float:left;"><?=$Comment?>
        </div>
		<?
		}
		?>
        <div style="width:70px;height:1px;padding:10px;float:left;clear:both">&nbsp;</div>
    </div>
    <div style="width:670px;height:50px;padding:0px;float:left;">
    <input class="MyButton"type="submit" name="direction" value="Main Menu">
    <br>
    </div> 
    </form>
</div>
</body>
</html>

Sorry for the amount of code in the last one. I am not a profesional developer, I grew up with ASP and moved over to .NET but I love using PHP as lynux servers are better. Also the code may not be all to your liking. Just have a quick look and see if you can see anything obviouse. I am mainly interested in th DD and the HH:MM data. is it the space that is causing the problem. If so, I need to convert the $AddDate to DD_HH:MM.

Edited December 21, 2022 by Paul-D

Barand · December 21, 2022

You need to put it in quotes otherwise it accepts the value up to the first space only

<a href="StatementEntry.php?ID=<?=$ID?>" title="<?=$AddDate?>">
                                               ^             ^

Paul-D · December 21, 2022

Thanks for your help. This works fine now and saves me a lot of searching. Don't know how to close the request.

Sign In

add toolo tips to hyperlink

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information