2014-02-27 35 views
1

是否可以在可點擊的數據提示中添加鏈接?如果可以,它是如何完成的?我會更好使用jQuery的工具提示嗎?使用html5數據提示可以在數據提示中添加鏈接嗎?

http://jsfiddle.net/BumU5/3/

<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p> 

<div data-tip="This is the text of the tooltip2"> 
    <input type="text" name="test" value="44"/> 
</div> 

[data-tip] { 
    position:relative; 

} 
[data-tip]:before { 
    content:''; 
    /* hides the tooltip when not hovered */ 
    display:none; 
    content:''; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid #1a1a1a; 
    position:absolute; 
    top:30px; 
    left:35px; 
    z-index:8; 
    font-size:0; 
    line-height:0; 
    width:0; 
    height:0; 
} 
[data-tip]:after { 
    display:none; 
    content:attr(data-tip); 
    position:absolute; 
    top:35px; 
    left:0px; 
    padding:5px 8px; 
    background:#1a1a1a; 
    color:#fff; 
    z-index:9; 
    font-size: 0.75em; 
    height:18px; 
    line-height:18px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    white-space:nowrap; 
    word-wrap:normal; 
} 
[data-tip]:hover:before, 
[data-tip]:hover:after { 
    display:block; 
} 
+0

什麼叫 「HTML5數據尖」 是什麼意思? '

'只是一個屬性 –

+0

是的,這是正確的。 –

+0

我希望它也可以點擊。 –

回答

1

試試這個(更新版)

<!-- html --> 
<p id="tooltip" data-tip-link="http://example.com/tool-tip-link" data-tip-text="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p> 

JS

$(document).ready(function() { 
    $("p#tooltip").hover(
    function() { 
     $(this).html("<a href="+$(this).data("tip-link")+">tool tip link</a><br>" 
     +$(this).data("tip-text")) 
    }, 
    function() { 
     $(this).html("This is a paragraph of text that has a tooltip.") 
    }); 
}) 
+0

感謝您的一些幫助..它隱藏文本,並有鏈接出現...我需要懸停以讓鏈接出現在工具提示和實際文字也停留在頁面上。 –

+0

@cookinggood查看更新版本。希望這可以幫助 – guest271314

相關問題