Question

我是新来的，所以大家好。我想知道是否有人可以提供帮助。我目前创建了一个“产品”面板，它从连接的数据库中获取所有产品信息。在我的数据库中，我有一个“ProductDescription”字段，其中包含有关产品的几句话。

我想知道当用户在产品图片上悬停时，是否有一种方式可以弹出带有描述的文本框（或类似内容）。这是可能的吗？

我对此完全陌生，如果这是一个愚蠢的问题，我很抱歉，但我真的不知道从哪里开始，这只是我的想法。希望在可能的情况下获得帮助

面板设计

<asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" Width="625px" Font-Bold="false"
              Font-Italic="false" Font-Overline="false" Font-Strikeout="false" Font-Underline="false" Height="540px">
    <ItemTemplate>
        <div align="left">
            <table cellspacing="1" class="style4" style="border: 1px ridge #9900FF">
                <tr>
                    <td style="border-bottom-style: ridge; border-width: 1px; border-color: #000000" class="auto-style2">
                        <asp:Label ID="lblProductName" runat="server" Text='<%# Eval ("ProductName") %>' Style="font-weight: 700"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img alt="" src='<%# Eval ("ProductImageUrl") %>' runat="server" id="imgProductImage" style="border: ridge 1px black; width: 173px; height: 160px;" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Price: £<asp:Label ID="lblProductPrice" runat="server" Text='<%# Eval ("ProductPrice") %>'></asp:Label>
                        <asp:Image ID="imgTick" runat="server" Visible="false" ImageUrl="~/WebsiteImages/tick.png" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Stock Avaliability: <asp:Label ID="lblAvailableStock" runat="server" Text='<%# Eval ("AvailableStock") %>'
                                                       ToolTip="Available Stock " ForeColor="Red" Font-Bold="True"></asp:Label>
                        <asp:HiddenField ID="hfProductID" runat="server" Value='<%# Eval ("ProductID") %>' />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="BtnAddToBasket" runat="server" CommandArgument='<%# Eval ("ProductID") %>'
                                    OnClick="BtnAddToBasket_Click" Text="Add to basket" Width="100%" BorderColor="Black"
                                    BorderStyle="Inset" BorderWidth="1px" />

                    </td>
                </tr>
            </table>
        </div>
    </ItemTemplate>
    <ItemStyle Width="33%" />
</asp:DataList>

Answer 1

HTML控件上的title属性成为该组件的悬停文本。

<img title="Your Hover Text" ...

如果您使用的是Bootstrap框架，则还可以通过设置data-toggle和data-placement属性来创建更具吸引力的悬停文字。

这是helpful tutorial的链接，为后者提供彻底的处理。

修改

请注意下面的其他问题，并假设您在设置ProductDescription时设置的ProductImageUrl具有相同的辅助功能，您可以在{{{{}}内的HTML中添加以下内容： 1}}标签：

img

Answer 2

尝试将鼠标悬停在图像上，您将能够看到描述：

   <asp:Image runat="server"  ToolTip="Description of your Product"/>

将鼠标悬停在文本框上？

2 个答案: