Tooltip Chord Guitar Responsive

Tooltip Chord Guitar Responsive

by Adi Jaya

HTML

<pre>
   <span class="showTip chord-Am">Am</span>
Lorem Ipsum dolor sit amet...
        <span class="showTip chord-C">C</span>
Lorem Ipsum dolor sit amet...
<span class="showTip chord-D">D</span>
Lorem Ipsum dolor sit amet...
</pre>


<div class="example">
<pre>add <code>display : none;</code> for this element</pre>

<div id="libs-chord-Am">
<pre>
|---|---|---|---|---||E
|---|---|---|---|---||A
|---|---|---|-o-|---||D
|---|---|---|-o-|---||G
|---|---|---|---|-o-||B
|---|---|---|---|---||e  
</pre>
</div>

<div id="libs-chord-c">this chord C //example</div>
<div id="libs-chord-d"><button>this chord D //example</button></div>
</div>

<p>
javascript and licensi by : <a target="_blank" href="http://www.dyn-web.com/code/tooltips/">http://www.dyn-web.com/code/tooltips/</a>
</p>
<p>
Demo by : <a target="_blank" href="https://www.facebook.com/nafis3333">ADI</a>
</p>


<script>
//javascript and licensi by http://www.dyn-web.com/code/tooltips/
function addLoadEvent(t){var e=window.onload?window.onload:function(){};window.onload=function(){e(),t()}}function dw_mouseleave(t,e){var o=(t=dw_Event.DOMit(t)).relatedTarget?t.relatedTarget:t.toElement?t.toElement:null;return e!=o&&!dw_contained(o,e)}function dw_contained(t,e){if(t){for(;t=t.parentNode;)if(t==e)return!0;return!1}}function dw_getPageOffsets(t){var e=0,o=0;do{e+=t.offsetLeft,o+=t.offsetTop}while(t=t.offsetParent);return{x:e,y:o}}function dw_getValueFromQueryString(t,e){if((e=e||window.location).search&&e.search.indexOf(-1!=t))for(var o,i=e.search.slice(1).split("&"),n=0;i[n];n++)if((o=i[n].split("="))[0]==t&&o[1])return o[1];return""}var dw_Event={add:function(t,e,o,i){i=i||!1,t.addEventListener?t.addEventListener(e,o,i):t.attachEvent&&t.attachEvent("on"+e,o)},remove:function(t,e,o,i){i=i||!1,t.removeEventListener?t.removeEventListener(e,o,i):t.detachEvent&&t.detachEvent("on"+e,o)},DOMit:function(t){return(t=t||window.event).target||(t.target=t.srcElement),t.preventDefault||(t.preventDefault=function(){return...

CSS

#tipDiv {
    font-size:11px; line-height:1.2;
    color:#000; background-color:#eee; 
    border:1px solid #667295; padding:4px;
    font-family :monospace;
}
.showTip {
  color : red;
}
.example {
/*  display : none;  */
    background: beige;
    padding: 15px;
    margin: 10px 0;
}
code {
    color: #e55eec;
}

JavaScript

//data chord toolTip with html content
dw_Tooltip.content_vars = {

'chord-Am': {html_id: 'libs-chord-Am',},
'chord-C': {html_id: 'libs-chord-c',},
'chord-D': {html_id: 'libs-chord-d',hoverable: true},
//etc..



}//close