使用数据库中的数据将鼠标悬停在多个文本段落上

Question

I'm trying to somehow do a popup over several paragraphs using HTML and PHP. The page uses a while loop to load data from a database, and each paragraph contains one row in the database table. Below are relevant parts of my code.

In the beginning of the file i have a php-part containing the following relevant lines:

<?php
    $kommun = $_SESSION['kommun'];
    $salary = $_SESSION['loen'];

    $sql2 = "SELECT * FROM sk_municip WHERE id = :id";
    $stmt2 = $dbh->prepare($sql2);
    $stmt2->execute(array(':id' => $kommun));

    $totalSkatt = (($salary * $result2['tax']) / 100);

    $sql3 = "SELECT id, name FROM sk_areas";
    $stmt3 = $dbh->prepare($sql3);
    $stmt3->execute();

    $sql4 = "SELECT area, part, percent, desc FROM sk-mun-".$kommun." WHERE area = :area ORDER BY percent DESC";
    $stmt4_1 = $dbh->prepare($sql4);
    $stmt4_2 = $dbh->prepare($sql4);
?>

Further down in the document, I have divs and paragraphs using the php above:

<?php while ($result3 = $stmt3->fetch()): ?>    

    <?php 
        $stmt4_1->execute(array(':area' => $result3['id']));
        $stmt4_2->execute(array(':area' => $result3['id']));
    ?>

    <?php if ($stmt4_1->fetchColumn() > 0): ?>
        <div class="taxarea">

            <div class="taximg">...</div>

            <div class="taxtext">
                <p class="inhead">...</p>
                <p class="inline">...</p>

                <?php while($result4 = $stmt4_2->fetch()): ?>
                    <?php $partSkatt = round((($totalSkatt * $result4['percent']) / 100)); ?>

                    <p class="tdone">
                        <?php echo $result4['part']; ?>
                    </p>

                    <p class="tdtwo">
                        <?php echo $partSkatt ?> kr
                    </p>

                    <p class="inline">...</p>
                <?php endwhile; ?>
            </div>
        </div>
    <?php endif; ?>
<?php endwhile; ?>

What I'm trying to do is that when someone hovers the mouse over the "tdone"- or "tdtwo"-classes, there will be a popup that contains the information in the desc-column for that row. If the tuple is empty or NULL, there should not be a popup.

This is kind of a complex problem, I hope I have been able do describe it in a good way. I know some ways to make popups, but not dynamically like I need it now. For me it does not matter id javascript, jquery or css is used, i just need a good way to do it.

Just adding the title attribute is not enough. I need, to be able to change colours on the popup block to make it look like the rest of the page.

Answer 1

You can use CSS only for the mouseover: http://jsfiddle.net/DbuDL/

.tdone, .tdtwo {
    width: 400px;
    height: 100px;
    overflow: hidden;
    border:1px solid black;
    background-color: white;
}
.tdone:hover, .tdtwo:hover {
    overflow:visible;
    height: auto;
}

But from a usability point of view it would probably be better to use an onclick event to collapse/expand the area.

EDIT: I've udpated jsFiddle : http://jsfiddle.net/DbuDL/1/ to use JavaScript for the mouse click.

You also need to place an image within the area that you want to show/hide.