sildona Posted October 27, 2012 Share Posted October 27, 2012 I have a PHP file that shows thumbnails, but I would like to add a tooltip that shows up when I hover the mouse over the thumbnail. echo "<img src='".$showimage."' height='200px' width='133px' />"; Thanks in advance! Link to comment https://forums.phpfreaks.com/topic/269966-how-to-add-tooltip-for-image-displayed-from-database/ Share on other sites More sharing options...
PravinS Posted October 27, 2012 Share Posted October 27, 2012 Set alt,title attribute for image tag Like: echo "<img src='".$showimage."' height='200px' width='133px' alt='SAMPLE TEXT'/>"; OR echo "<img src='".$showimage."' height='200px' width='133px' title='SAMPLE TEXT'/>"; or you can download some javascript tooltip script and apply it to image tag. Link to comment https://forums.phpfreaks.com/topic/269966-how-to-add-tooltip-for-image-displayed-from-database/#findComment-1388081 Share on other sites More sharing options...
codefossa Posted October 27, 2012 Share Posted October 27, 2012 Here's two examples to do it. Example Page: http://xaotique.no-ip.org/tmp/13/ index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Xaotique</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <?php $image = "http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg"; ?> <img height="250" src="<?php echo $image; ?>" title="Example 1 using a title attribute." /> <img height="250" src="<?php echo $image; ?>" class="js-title" title="Example 2 using Javascript or title attribute backup." /> </body> </html> script.js $(document).ready(function() { var hover = false, item; $(window).mousemove(function(e) { if (hover) { item.data("tooltip").css( { left: e.pageX + 20, top: e.pageY + 20 }).show(); } }); $(".js-title").hover( function(e) { if ($(this).attr("title") != undefined) { $(this).data("title", $(this).attr("title")); $(this).data("tooltip", $(document.createElement("div")) .html($(this).data("title")) .attr("className", "js-tooltip") .css( { position: "absolute", left: 0, top: 0, "background-color": "#252525", color: "#EFEFEF", padding: 5, border: "4px double #EFEFEF", "white-space": "nowrap" }) .hide() ); $("body").append($(this).data("tooltip")); $(this).removeAttr("title"); } if ($(this).data("title") != undefined) { hover = true; item = $(this); } }, function() { hover = false; item.data("tooltip").hide(); } ); }); Link to comment https://forums.phpfreaks.com/topic/269966-how-to-add-tooltip-for-image-displayed-from-database/#findComment-1388091 Share on other sites More sharing options...
paulinetaylor85 Posted November 5, 2012 Share Posted November 5, 2012 You will add a new control to the image for each site in the database and set the size of the ToolTip window. I will suggest this link. http://www.codeproject.com/Articles/42050/ToolTip-With-Image-C Link to comment https://forums.phpfreaks.com/topic/269966-how-to-add-tooltip-for-image-displayed-from-database/#findComment-1390265 Share on other sites More sharing options...
trq Posted November 5, 2012 Share Posted November 5, 2012 Your link, paulinetaylor85, is completely off topic. Link to comment https://forums.phpfreaks.com/topic/269966-how-to-add-tooltip-for-image-displayed-from-database/#findComment-1390269 Share on other sites More sharing options...
nodirtyrockstar Posted November 5, 2012 Share Posted November 5, 2012 If it were my site, I would add the tooltip text in a new field to the database. Then when you are fetching from the DB, retrieve that and bind it as an additional result. while($stmt->fetch()){ $format = "<img src='%s' title='%s' />" // where %s is a placeholder for a variable string printf($format, $imgSrc, $imgTooltip) // $format is the intended format, the following two parameters are the strings that you will place into the image placeholders during each iteration of results. } Link to comment https://forums.phpfreaks.com/topic/269966-how-to-add-tooltip-for-image-displayed-from-database/#findComment-1390423 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.