CODEWITHSUNDEEP
htmltooltip
user2129596
user2129596

Reputation: 39

tool tip pop up text when hovering over an image?

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>

Upvotes: 3

Views: 24859

Answers (3)

kurdtpage
kurdtpage

Reputation: 3221

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)

Upvotes: 1

kurdtpage
kurdtpage

Reputation: 3221

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

Upvotes: 6

PsychoMantis
PsychoMantis

Reputation: 1015

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)

Upvotes: 0

Related Questions