不能使一個css工具提示只有一個

-3

我有一個問題，使一個CSS工具提示，我看了教程http://www.menucool.com/tooltip/css-tooltip，但我不明白的CSS代碼。不能使一個css工具提示只有一個

我在Javascript類上做了什麼，是創建一個新圖像並將它叫做getSclass()來應用css。在教程提供的代碼中，我不明白我應該放置html部分的位置，以及a.tooltip如何（這是否意味着我給了我的圖像一個特殊的ID？）我必須做什麼那麼如果我只能使用Javascript類（當我打電話給img）和一個css文件。我也撥打了settooltiptext()，但我認爲這不是這種情況！

來源

2015-08-20 Junior12

與其向你解釋我們做了什麼，你應該分享你的代碼，也許是一個工作的例子。 – Rvervuurt

我已經解決了你的問題儘可能好，但它仍然沒有任何意義。請閱讀並確保它是可以理解的。 – Rvervuurt

你可以通過CSS本身做到這一點。雖然有很多插件，但我們可以做這樣的事情。首先，你需要一個懸停元素，比如說在這種情況下，一個鏈接。

<a href="#">Hover Me!</a>

接下來應該是工具提示。我們現在可以有一個<span>並將其放入鏈接。

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

現在是真正的CSS部分。

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;} 
a {position: relative;} 
a:hover span {display: block; text-align: center;}

片段

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;} 
 
a {position: relative;} 
 
a:hover span {display: block; text-align: center;}

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

這只是一個純CSS的解決方案之一。你可以看到工作fiddle here。

但是，有很多插件，它們將這個概念作爲基礎，並且適用於懸停卡和工具提示。一些很好的例子包括：

來源

2015-08-20 08:44:49

從你的問題這是一個有點很難猜測你的工作正是你如何輸出html。但也許幫助你瞭解CSS代碼將幫助你解決你的問題。

CSS的提示取決於以下HTML結構

<!--the a element should wrap both the standard text or image--> 
<a href="#" class="tooltip"> 
    <!--tooltip text or image here --> 
    Tooltip 
    <!--the tooltip part here--> 
    <span> 
     <!--important is the class callout on the image--> 
     <img class="callout" src="cssttp/callout.gif" /> 
     <!-- and this is just text that fills the tooltip--> 
     <strong>Most Light-weight Tooltip</strong><br /> 
     This is the easy-to-use Tooltip driven purely by CSS. 
    </span> 
</a>

關鍵的CSS規則如下：

a.tooltip span { 
    z-index:10; 
    display:none; /*hide the span normally*/ 
    padding:14px 20px; 
    margin-top:-30px; margin-left:28px; 
    width:300px; line-height:16px; 
} 

a.tooltip:hover span{ 
    display:inline; /*when we hover the tooltip, the span inside gets displayed inline*/ 
    position:absolute; /*and we make sure that the tooltip doesn't move other content*/ 
    color:#111; 
    border:1px solid #DCA; background:#fffAF0; 
}

的CSS剩下的只是樣式它「漂亮」，但主要功能在於3條註釋行。

所以當你輸出你的代碼到html時，你需要用class tooltip產生一個'a'元素，裏面有文本（或圖像）和跨度，跨度應該有圖像課堂標註。

希望這會有所幫助。

來源

2015-08-20 08:51:38 DrunkWolf

不能使一個css工具提示只有一個

回答

相關問題