The purpose is to attach a tooltip-element to arbitrary HTML-elements.
The tooltip appears when the user hovers an element. Follows the mouse-pointer while moving over the element.
/**
* Attaches a tooltip to every element in the result-set.
* @param { string } selector - An CSS-selector.
* @param { number } horizontalOffset - Horizontal
* distance to the mouse pointer.
* @param { number } VerticalOffset - Vertical distance
* to the mouse pointer.
*
* All parameter are optional. But providing a valid
* selector is indispensable for the function to work.
*
* Usage example:
* ... })('.tooltip-item', 10, 5);
*/
(function(selector, horizontalOffset, verticalOffset) {
var items;
selector = selector || '.tooltip';
horizontalOffset = horizontalOffset || 5;
verticalOffset = verticalOffset || 5;
items = document.querySelectorAll(selector);
items = Array.prototype.slice.call(items);
items.forEach(function(item) {
// Every time the pointer moves over the element the
// CSS-rule in overwritten with new values for
// top and left.
item.addEventListener('mousemove', function(e) {
let countCssRules = document.styleSheets[0].cssRules.length;
let newRule = selector +
':hover:after { display: block; ' +
'left: ' + (e.offsetX + horizontalOffset) + 'px; ' +
'top: ' + (e.offsetY + verticalOffset) + 'px; }';
document.styleSheets[0].insertRule(newRule, countCssRules);
});
});
})('.tooltip-item', 10, 5);
.wrap {
width: 1000px;
margin: 50px auto;
font-family: georgia, serif;
background-color: cornsilk;
padding: 20px 30px;
}
div.tooltip-item {
background-color: orange;
width: 450px;
height: 100px;
border: 1px solid black;
border-radius: 8px;
margin: 60px 10px;
}
.tooltip-item {
position: relative;
cursor: pointer;
}
.tooltip-item:after {
content: attr(data-message);
position: absolute;
left: 105%;
white-space: nowrap;
display: none;
font-size: 1.2rem;
background-color: rgba(230, 230, 230, 0.6);
padding: 10px 20px;
border-radius: 16px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-weight: normal;
}
div.tooltip-item:after {
text-transform: uppercase;
}
h1.tooltip-item:after {
background-color: cyan;
color: #ff14ec;
font-weight: 800;
border-radius: 20px;
box-shadow: 6px 6px 9px #969696;
}
p.tooltip-item:after {
background-color: #232323;
color: #efefef;
font-weight: 800;
border-radius: 6px;
box-shadow: 0 0 0 grey;
}
<div class="wrap">
<h1 class="tooltip-item" data-message="You are hovering the h1-element.">Demo Page - Tooltip following the Mouse-Pointer</h1>
<div class="tooltip-item" data-message="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."></div>
<p class="tooltip-item" data-message="Paragraph-element with a tooltip attached to it.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
The uncompiled Sass-code:
$fontStack: Tahoma, Verdana, Segoe, sans-serif;
$primaryColor: cornsilk;
@function getGreyValue($greyByte: 240, $opacity: 1.0) {
@return rgba($greyByte, $greyByte, $greyByte, $opacity);
}
@mixin setTooltipStyles( $element,
$backgroundColor: #232323,
$color: #efefef,
$fontWeight: 600,
$borderRadius: 6px,
$shadowX: 0,
$shadowY: 0,
$shadowBlur: 0,
$shadowColor: grey ) {
#{ $element }.tooltip-item:after {
background-color: $backgroundColor;
color: $color;
font-weight: 800;
border-radius: $borderRadius;
box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
}
}
.wrap {
width: 1000px;
margin: 50px auto;
font-family: georgia, serif;
background-color: $primaryColor;
padding: 20px 30px;
}
div.tooltip-item {
background-color: orange;
width: 450px;
height: 100px;
border: 1px solid black;
border-radius: 8px;
margin: 60px 10px;
}
.tooltip-item {
position: relative; // Essential for tooltip to work!
cursor: pointer;
}
.tooltip-item:after {
content: attr(data-message); // Essential for tooltip to work!
position: absolute; // Essential for tooltip to work!
left: 105%;
white-space: nowrap;
display: none;
font-size: 1.2rem;
background-color: getGreyValue(230, 0.6);
padding: 10px 20px;
border-radius: 16px;
font-family: $fontStack;
font-weight: normal;
}
// Use higher specificity for getting different designs.
div.tooltip-item:after {
text-transform: uppercase;
}
@include setTooltipStyles('h1', cyan, #ff14ec, 800, 20px, 6px, 6px, 9px, rgba(150, 150, 150, 1.0));
@include setTooltipStyles('p');
Currently it is necessary to write certain mandatory code in HTML and CSS. Afterwards the JavaScript function can be used.
Should I try to concentrate more on JavaScript only? I mean: Should I try to reduce the mandatory HTML-, CSS-code to a minimun?
Or is Okay the way I have done it?
The parameter of the JavaScript-function are optional.
But actually the first parameter (CSS-selector) is mandatory for the function to work. If it isn't correct to code will silently fail.
Should I change that?
Return with an exit-code which signals an error? Perhaps even throw an exception?
Looking forward to read your opions about the points I have mentioned. Other hints would interest me too.