Using html5 data-tip can you add a link inside the data-tip?

Question

Is it possible to add a link inside the data tip that is clickable and if so.. how is it done? Would i be better off using jquery tooltip?

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

Answer 1

Try this (updated version)

<!-- 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.")
  });
})