Skip to content

Instantly share code, notes, and snippets.

@marijer
Created March 17, 2014 15:16
Show Gist options
  • Save marijer/9601129 to your computer and use it in GitHub Desktop.
Save marijer/9601129 to your computer and use it in GitHub Desktop.
tooltip gist
<style>
.tooltip-container {
position: absolute; /* must have this */
background: #000;
background: rgba(0,0,0,.7);
color: #fff;
font: normal 11px/15px sans-serif;
padding: 5px 10px;
border-radius: 3px;
max-width: 200px;
opacity: 0;
}
</style>
<a href="#" style="margin-left: 260px" data-tooltip="User Experience and some other things one has to think about" > Searchbox Area</a>
<script>
$( function() {
// tooltip
function Tooltip( idName){
var label = document.createElement('span')
label.id = idName;
label.className = 'tooltip-container';
document.body.appendChild(label);
$label = $(label);
this.onMouseEvent = function( e ) {
var $this = $( this ),
offset = $this.offset(),
xOffset = offset.left;
yOffset = /*e.pageY -*/ offset.top + 30;
switch( e.type ){
case 'mouseenter':
onMouseEnter();
break;
case 'mouseleave':
onMouseLeave();
break;
case 'mousemove':
onMouseMove();
break;
}
function onMouseEnter(){
var title = $this.data('tooltip') || '';
label.innerHTML = title;
var w = window.innerWidth,
elWidth = label.offsetWidth;
var xPos = w - ( xOffset + elWidth );
xOffset = xPos < 0 ? xOffset + xPos - 20: xOffset;
$label.css( { left: xOffset, top: yOffset } )
.animate( { opacity: 1 }, 150 );
}
function onMouseLeave(){
$label.animate( { opacity: 0 }, 50 );
}
function onMouseMove(){
//$label.css({ left: xOffset, top: yOffset });
}
}
}
var tooltip = new Tooltip('tooltip');
$('*[data-tooltip]').on({
mouseenter: tooltip.onMouseEvent,
mouseleave: tooltip.onMouseEvent,
mousemove: tooltip.onMouseEvent
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment