使用html元素和styes的圖像工具提示

當我將圖像懸停時，不顯示圖像標題/工具提示，而是顯示與該圖像相關的整個html，包括樣式。附上相同的截圖。使用html元素和styes的圖像工具提示

我們已經做了的是，標題就這樣產生了這樣一種方式，當點擊

title="<h2 style='position: absolute;top: -35px;font-size: 13px;left: 0;color: #fff;width: 100%;font-weight:bold;'><?php echo $portfolio['portfolio_title']; ?></h2><p style=position: absolute;top: -5px;left: 0%; width: 100%;margin:0!important; font-size:12px!important;'><?php echo $portfolio['portfolio_description']; ?></p>"

來源

2016-07-19 Gops

我敢肯定你的*標題*圖像的屬性被竊聽與錯的HTML。發佈您的HTML以獲得適當的解決方案 –

您無法設計標題屬性的樣式 – j08691

是的！，但有沒有辦法在懸停時隱藏它。由於插件使用該標題來顯示第二張圖像上顯示的圖像名稱/標題。謝謝 – Gops

圖像popsup把你想要視爲冠軍的東西在你的圖片標籤中。

<img src="x" title="What you want showed"/>

來源

2016-07-19 17:59:16

我已更新我的查詢。我們正在使用彈出窗口的插件。它有一個標題選項，用作標題/標題，當顯示較大的圖像時 – Gops

您的問題最簡單的解決方法是：創建一個單獨的DIV和風格，因此與通過CSS/JS默認隱藏。將鼠標懸停在圖像上時，可以看到它。

.wrapper { 
 
    width: 200px; 
 
    height: auto; 
 
    position: relative; 
 
    margin-top: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.wrapper:hover .hover-element { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 
.hover-element { 
 
    width: 100%; 
 
    height: auto; 
 
    position: absolute; 
 
    top: -150px; 
 
    left: 0; 
 
    background: #000; 
 
    color: #fff; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 0.5s; 
 
}

<div class="wrapper"> 
 

 
    <img src="http://lorempixel.com/200/200" alt="" /> 
 

 
    <div class="hover-element"> 
 
    <h2>Tooltip Text</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adip</p> 
 
    </div> 
 

 

 
</div>

Here's the fiddle

來源

2016-07-19 18:16:22

嗨安華，感謝您的支持。懸停時是否有隱藏標題的選項？ – Gops

你的意思是你想使用HTML標題屬性而不是創建單獨的div？還有另一種方法，你需要使用JavaScript。 –

嗨安瓦爾，我的意思是使用一些JavaScript來隱藏標題顯示（只在懸停）。謝謝 – Gops

謝謝大家的支持。我能夠通過使用另一個堆棧溢出問題的腳本來解決問題。

jquery: hide title attribute but not remove it

我用Ridwan Pujakesuma的答案來解決它。

再次感謝

問候的GOP

來源