將鼠標懸停在文本框上？

-1

我是新來的，所以你好。我想知道是否有人可以提供幫助。我目前創建了一個「產品」面板，它可以從連接的數據庫中獲取所有產品信息。在我的數據庫中，我有一個「ProductDescription」字段，其中包含幾個關於產品的句子。將鼠標懸停在文本框上？

我想知道是否有一種方式，當用戶在產品圖像上懸停時，文本框（或類似的東西）會隨着描述彈出。這是可能的嗎？

我完全新的這個很抱歉，如果這是愚蠢的問題，但我真的不會有什麼地方開始，這只是一個想法，我有foggest。希望得到幫助，在可能情況下

面板設計

<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>

來源

2016-03-03 user5986860

上的HTML控件的屬性title成爲該組件的懸停文本。

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

如果您使用的Bootstrap框架，您可以創建還設置data-toggle和data-placement屬性更具有吸引力懸停文字。

這是一個鏈接到helpful tutorial，給後者主題一個徹底的治療。

編輯：

說起下方的額外問題，假設你有設置ProductDescription在你的代碼相同的可訪問性的背後，你已經設置ProductImageUrl，你將以下內容添加到您的HTML img內標籤：

<img title='<%# Eval ("ProductDescription") %>'

來源

2016-03-03 22:58:03

嗨 - 我還沒有手動插入每個圖像。它們都使用存儲過程從數據庫調用/加載 - 這是如何工作的？對不起，我的知識相當有限 – user5986860

頁面是從代碼生成的嗎？爲每幅圖像生成上述表格之一的循環？如果是這樣的話，你可以編輯代碼在代碼中包含諸如'@「title =」「」+ thisRecord.ProductDescription +「」「」''。 –

雖然我們在這個問題上，學習使用'div's而不是'table's。是的，他們很難學習前面的知識並且比桌面更不直觀，但是當老闆說這個頁面必須在智能手機上響應的時候，你會很感激。同樣，Bootstrap框架有一些[有用的工具]（http://getbootstrap.com/2.3.2/scaffolding.html）來使事情成爲正確的寬度。 –

試試這個鼠標在圖像上，你將能夠看到的說明：

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

來源

2016-03-04 04:27:39

將鼠標懸停在文本框上？

回答

相關問題