懸停工具提示顯示圖像

Question

我想在懸停的工具提示中顯示圖像。 我發現這個解決方案，這是真棒，我只需要像這樣：

Codepen

CSS：

@import "compass"; 

* { 
    box-sizing: border-box; 
} 

.tooltip { 
    position: relative; 
    border-bottom: 1px dotted #ccc; 
    cursor: help; 

    &:before, &:after { 
    @include single-transition($duration: .6s); 
    visibility: hidden; 
    } 

    &:before { 
    @include opacity(0); 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -6px; 
    content: '\00a0'; 
    height: 0; 
    width: 0; 
    border-bottom: 6px solid #363636; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    } 

    &:after { 
    @include opacity(0); 
    @include border-radius(4px); 
    position: absolute; 
    content: attr(title); 
    top: 100%; 
    left: -12px; 
    width: 100%; 
    min-width: 120px; 
    margin: 0; 
    padding: 8px 10px; 
    background: #363636; 
    color: #fff; 
    font-size: 1.2rem; 
    font-weight: normal; 
    text-align: center; 
    } 

    &:hover { 

    &:after, &:before { 
     @include opacity(1); 
     visibility: visible; 
    } 

    &:before { 
     bottom: -6px; 
    } 

    &:after { 
     margin-top: 6px; 
    } 
    } 
} 

// Demo 

html { 
    font-size: 62.25%; 
} 

body { 
    font-size: 1.6rem; 
} 

h1 { 
    font-size: 2.4rem; 
} 

.wrapper { 
    max-width: 32em; 
    padding: 12px; 
    margin: 0 auto; 
    font-family: sans-serif; 
    line-height: 1.4; 
} 

HTML：

<div class="wrapper"> 
    <h1 class="tooltip" title="Tooltip">Pure CSS Tooltip</h1> 
    <p><span class="tooltip" title="I'm a Tooltip">Lorem ipsum dolor sit amet</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestiae, quis accusamus fugiat officiis amet ullam, inventore vero! Officia iusto totam quis amet consequatur numquam nesciunt alias deleniti eos quas?<span class="tooltip" title="Another Tooltip"> 
    Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. Beatae ut nihil labore at reiciendis placeat modi, Lorem ipsum dolor sit ameteum quia delectus similique accusamus sed soluta sunt aliquid repudiandae assumenda a illo molestiae. 
    <span class="tooltip" title="One more Tooltip">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. Deserunt incidunt et earum repellendus, maxime neque voluptate molestias quod at illo maiores tempora suscipit, deleniti ipsum nesciunt, animi tempore, esse cum? 
    </p> 
</div> 

但問題是title屬性可以onl y是文字，我需要顯示圖片。這可以改變，如果是這樣，怎麼樣？還是有另一種解決方案？

預先感謝您。

PS：對不起，如果它聽起來像一個愚蠢的問題，因爲它的第一個問題在Stackoverflow。

Answer 1

你可以這樣做一個：

CSS：

* { 
    box-sizing: border-box; 
} 

.tooltip { 
    position: relative; 
    border-bottom: 1px dotted #ccc; 
    cursor: help; 
} 

:before, :after { 
    visibility: hidden; 
} 

:before { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -6px; 
    content: '\00a0'; 
    height: 0; 
    width: 0; 
    border-bottom: 6px solid #363636; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
} 

:after { 
    position: absolute; 
    content: attr(title); 
    top: 100%; 
    left: -12px; 
    width: 100%; 
    min-width: 120px; 
    margin: 0; 
    padding: 8px 10px; 
    background: #363636; 
    color: #fff; 
    font-size: 1.2rem; 
    font-weight: normal; 
    text-align: center; 
} 

:hover:after, :hover:before { 
    visibility: visible; 
} 

:hover:before { 
    bottom: -6px; 
} 

:hover:after { 
    margin-top: 6px; 
} 

html { 
    font-size: 62.25%; 
} 

body { 
    font-size: 1.6rem; 
} 

h1 { 
    font-size: 2.4rem; 
} 

.wrapper { 
    max-width: 32em; 
    padding: 12px; 
    margin: 0 auto; 
    font-family: sans-serif; 
    line-height: 1.4; 
} 

DEMO

Answer 2

歡迎計算器！不幸的是，沒有機會將圖像添加到title屬性。你應該使用jQuery庫，如jquery.ui。請參閱此post。

Answer 3

如果你更專注於定製提示那麼你應該去

jQuery-powertip

因爲你正在尋找圖像提示然後按照這個例子。

這裏是我的JSFiddle

HTML：

<div id="image_tooltip"> 
    <div>1914 translation by H. Rackham</div> 
</div> 

CSS：

#image_tooltip div { 
    background-color: #EEE; 
    border: 1px solid #CCC; 
    border-radius: 3px; 
    text-align: center; 
    width: 400px; 
    padding: 40px; 
} 

jQuery的（你已經包括jQuery的庫以及powertip jQuery的& CSS：

/*image_tooltip examples*/ 
$('#image_tooltip div').data('powertip', $([ 
    '<img src="https://lh3.googleusercontent.com/-5khUd9Qwc-o/AAAAAAAAAAI/AAAAAAAAAZ0/IUp786Zkfgc/photo.jpg?sz=48" />'].join('\n'))); 
$('#element div').powerTip({ 
    followMouse: true 
}); 

遵照指示，你會得到你的提示，如：

，你可以輕鬆地定製其位置，工具提示行爲以及它的外觀。

希望這會幫助你。