tool tip pop up text when hovering over an image?

Question

links should be 1em sans-serif font with padding of 5 and 10 pixels and margins of 0 0 1 pixels (hint: use shorthand properties); the right border should be 5 pixels and color #ff1828

b. when user hovers over a link, the right border should be style double with 5 pixels in white

c. At start-up, there should be no display of text beneath any of the three images of pasta; use the tags to control the display text pop-up upon the hovering; position the block of text as absolute with a top margin of 220 pixels and left margin of 550 pixels; the width of the block should be 180 pixels at a minimum, depending on how much text you find in your research; use padding of 5 pixels and margins of 10 pixels; the text should be white on a black background.

I have been trying everything and this is what I have so far and nothing is working. I'm not quite sure what I'm doing wrong? If anybody could help I would surely appreciate it. here is my code so far:

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 7-3</title

<style type="text/css">
<!--

#links {font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px color: #ff1828}

div.links:hover {border-right: double 5px; color:white}

<span>
div#sizes a:hover img.large {position: absolute; top: 220px; left: 550px; 
                            width: 180px; border:none; padding: 5px; margin: 10px
                            background-color: #000000; color: #ffffff}

</span>     
-->
</style>                    

</head>

<body>

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" />
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> 

<div id="links" "demo">
<table style="text-align: center">
    <tr>

    <td>
        <a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine"  title="Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron"/>

    </td>

    <td>
        <a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" title=" Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium" />
    </td>

    <td>
        <a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" title=" Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium" />
    </td>
    </td>
</table>


</div>


</body>
</html>

kurdtpage · Accepted Answer · 2013-07-20 10:45:05Z

6

Have you tried using <img src='' title='popup' /> ?

answered Jul 20, 2013 at 10:45

kurdtpage

3,2631 gold badge26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2080225 Over a year ago

Yes this is the simplest way if you merely need a text message, and don't mind the default font and background, etc, provided by the browser.

kurdtpage · Accepted Answer · 2015-06-25 09:17:38Z

1

It's been a long time since this question was asked, but for the benefit of people in the future Googling this question, another possible solution would be to use Twitter's Bootstrap CSS platform. See here: http://getbootstrap.com/javascript/#popovers

You would need to implement JQuery as well as the CSS files, but that can be achieved relatively easily by adding 2 lines of code (see the Getting Started section at the top of the file)

answered Jun 25, 2015 at 9:17

kurdtpage

3,2631 gold badge26 silver badges24 bronze badges

1 Comment

kurdtpage Over a year ago

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>

PsychoMantis · Accepted Answer · 2013-03-17 23:04:11Z

0

Your title tag isn't closed :p

Also, I can't see any reference to your to your div or img classes other than the

img.large

Try

img.title

or

.picture.title

which will be your img tag selector or class selector for the img tag respectively.

.className refers to the class name to any given element where the latter refers to the title attribute of the element.

So try this, and I haven't tested this so can't be sure of the outcome but hopefully its helpful:

instead of:

div#sizes a:hover img.large

replace with:

img.title **or** .picture.title

Best of luck.

(Use of CSS as experience, w3schools as ref)

answered Mar 17, 2013 at 23:04

PsychoMantis

1,0153 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

tool tip pop up text when hovering over an image?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related