Test-Seite
Für-Das-Kappe-App-Menü
TooltipVarianten für den Menü-Link /programm
Tooltip PHP-Code für den Menü-Link /programm
// JavaScript für /main.js
function positionTooltip(triggerClass, tooltipClass, offset) {
$(triggerClass).hover(
function() {
var linkPosition = $(this).offset();
var linkHeight = $(this).outerHeight();
var linkWidth = $(this).outerWidth();
var targetWidth = $(tooltipClass).outerWidth();
$(tooltipClass).css({
top: linkPosition.top + linkHeight + offset,
left: linkPosition.left + (linkWidth / 2) - (targetWidth / 2)
});
setTimeout(function() {
$(tooltipClass).fadeIn('fast');
}, 200);
},
function() {
$(tooltipClass).fadeOut('fast');
}
);
}
// JavaScript für /page.js
$(document).ready(function() {
positionTooltip('.f6-tooltip-trigger-programm', '.f6-tooltip-programm', 11);
positionTooltip('.f6-tooltip-trigger-karten', '.f6-tooltip-karten', 11);
positionTooltip('.f6-tooltip-trigger-location', '.f6-tooltip-location', 11);
positionTooltip('.f6-tooltip-trigger-kappeApp', '.f6-tooltip-kappeApp', 11);
positionTooltip('.f6-tooltip-trigger-retro', '.f6-tooltip-retro', 11);
});
/* CSS-Code */
.f6-tooltip-programm, .f6-tooltip-karten, .f6-tooltip-location, .f6-tooltip-kappeApp, .f6-tooltip-retro {
margin-top: 0.1875rem
}
html[data-chroma-style^="final-"] .f6-tooltip-programm,
html[data-chroma-style^="final-"] .f6-tooltip-karten,
html[data-chroma-style^="final-"] .f6-tooltip-location,
html[data-chroma-style^="final-"] .f6-tooltip-kappeApp,
html[data-chroma-style^="final-"] .f6-tooltip-retro,
html[data-chroma-style^="final-"] .dropdown-menu {
margin-top: 1.969rem
}
html[data-chroma-style^="final-"] .dropdown-menu {
margin-top: 1.5rem
}
