Tooltip über Kreisnavigation

PanamaJAG · 13. November 2019

Hallo zusammen,

ich versuche aktuell die sehr schicke Kreisnavigation, die Sara Soueidan online bereitgestellt hat (Building a Circular Navigation with CSS Transforms) für mein Projekt zu adaptieren.

Das grundsätzliche funktioniert auch ganz wunderbar, die Kreisnavigation an sich klappt perfekt und läuft einwandfrei.
Mein Problem liegt nun bei einer Erweiterung des bestehenden Codes: Ich würde sehr gerne eine Art Tooltip zentriert über dem Kreismenü einblenden, da für mein Projekt die Icons nicht unbedingt von jedem korrekt verstanden werden dürften bzw. ich 1-2 Menüpunkte habe, die mit Icons schwer abzubilden sind. Da ich die Icon-Lösung aber generell schicker finde als die alternative Textversion aus dem ursprünglichen Beispiel, würde ich gerne bei den Icons bleiben.
Nur halt mit der Ergänzung, dass beim MouseOver über dem jeweiligen Menüpunkt zentriert über der gesamten Kreisnavigation eine Texteinblendung erscheint als Zusatz.

Bislang bin ich daran krachend gescheitert...
Normale Tooltips sind ja eigentlich kein Problem, nur aufgrund der Kreisnavigation komme ich aus dem jeweiligen "Kuchenstück" des Menüpunktes mit einem normalen Tooltip nicht raus.
Evtl. kann mir hier ja hier jemand helfen wie ich das wohl lösen könnte?
Wäre sensationell!

Hier der Code aus meinem Projekt:

HTML

HTML:

<nav>

    <button class="cn-button" id="cn-button">Menu</button>

                <div class="cn-wrapper" id="cn-wrapper">

                    <ul>

                        <li><a href="#"><span class="fas fa-info"></span></a></li>

                        <li><a href="#"><span class="fas fa-layer-group">></span></a></li>

                        <li><a href="#"><span class="fas fa-photo-video"></span></a></li>

                        <li><a href="#"><span class="fas fa-shopping-cart"></span></a></li>

                        <li><a href="#"><span class="fas fa-wrench"></span></a></li>

                        <li><a href="#"><span class="fas fa-download"></span></a></li>

                        <li><a href="#"><span class="far fa-envelope"></span></a></li>

                     </ul>

                </div>

</nav>

CSS

CSS:

* {

    position: relative;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    list-style: none;

}



.cn-button {

    position: fixed;

    left: 50%;

    bottom: 1em;

    z-index: 11;

    margin-top: -2.25em;

    margin-left: -2.25em;

    padding-top: 0em;

    width: 4.5em;

    height: 4.5em;

    border: none;

    border-radius: 50%;

    background: none;

    background-color: darkgrey;

    color: white;

    text-align: center;

    font-weight: 700;

    font-size: 1.5em;

    text-transform: uppercase;

    cursor: pointer;

    -webkit-backface-visibility: hidden;

}


.csstransforms .cn-wrapper {

    position: fixed;

    top: 90%;

    left: 50%;

    z-index: 10;

    margin-top: -13em;

    margin-left: -13.5em;

    width: 27em;

    height: 27em;

    border-radius: 50%;

    background: transparent;

    opacity: 0;

    -webkit-transition: all .3s ease 0.3s;

    -moz-transition: all .3s ease 0.3s;

    transition: all .3s ease 0.3s;

    -webkit-transform: scale(0.1);

    -ms-transform: scale(0.1);

    -moz-transform: scale(0.1);

    transform: scale(0.1);

    pointer-events: none;

    overflow: hidden;

}


/*cover to prevent extra space of anchors from being clickable*/

.csstransforms .cn-wrapper:after{

  content:".";

  display:block;

  font-size:2em;

  width:6.2em;

  height:6.2em;

  position: absolute;

  left: 50%;

  margin-left: -3.1em;

  top:50%;

  margin-top: -3.1em;

  border-radius: 50%;

  z-index:10;

  color: transparent;

}


.csstransforms .opened-nav {

    border-radius: 50%;

    opacity: 1;

    -webkit-transition: all .3s ease;

    -moz-transition: all .3s ease;

    transition: all .3s ease;

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    pointer-events: auto;

}


.csstransforms .cn-wrapper li {

    position: absolute;

    top: 50%;

    left: 50%;

    overflow: hidden;

    margin-top: -1.3em;

    margin-left: -10em;

    width: 10em;

    height: 10em;

    font-size: 1.5em;

    -webkit-transition: all .3s ease;

    -moz-transition: all .3s ease;

    transition: all .3s ease;

    -webkit-transform: rotate(76deg) skew(60deg);

    -moz-transform: rotate(76deg) skew(60deg);

    -ms-transform: rotate(76deg) skew(60deg);

    transform: rotate(76deg) skew(60deg);

    -webkit-transform-origin: 100% 100%;

    -moz-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

    pointer-events: none;

}


.csstransforms .cn-wrapper li a {

    position: absolute;

    right: -7.25em;

    bottom: -7.25em;

    display: block;

    width: 14.5em;

    height: 14.5em;

    border-radius: 50%;

    background: #429a67;

    background: -webkit-radial-gradient(transparent 35%, #555555 35%);

    background: -moz-radial-gradient(transparent 35%, #555555 35%);

    background: radial-gradient(transparent 35%, #555555 35%);

    color: #fff;

    text-align: center;

    text-decoration: none;

    font-size: 1.2em;

    line-height: 2;

    -webkit-transform: skew(-60deg) rotate(-75deg) scale(1);

    -moz-transform: skew(-60deg) rotate(-75deg) scale(1);

    -ms-transform: skew(-60deg) rotate(-75deg) scale(1);

    transform: skew(-60deg) rotate(-75deg) scale(1);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    pointer-events: auto;

}


.csstransforms .cn-wrapper li a span {

    position: relative;

    top: 0.2em;

    display: block;

    font-size: 1em;

    font-weight: 700;

    text-transform: uppercase;

}


.csstransforms .cn-wrapper li a:hover,

.csstransforms .cn-wrapper li a:active,

.csstransforms .cn-wrapper li a:focus {

    background: -webkit-radial-gradient(transparent 35%, #424242 35%);

    background: -moz-radial-gradient(transparent 35%, #424242 35%);

    background: radial-gradient(transparent 35%, #424242 35%);

}

.csstransforms .cn-wrapper li a:focus {

    position: fixed; /* fix the displacement bug in webkit browsers when using tab key */

}


.csstransforms .opened-nav li {

    -webkit-transition: all .3s ease .3s;

    -moz-transition: all .3s ease .3s;

    transition: all .3s ease .3s;

}


.csstransforms .opened-nav li:first-child {

    -webkit-transform: rotate(-20deg) skew(60deg);

    -moz-transform: rotate(-20deg) skew(60deg);

    -ms-transform: rotate(-20deg) skew(60deg);

    transform: rotate(-20deg) skew(60deg);

}


.csstransforms .opened-nav li:nth-child(2) {

    -webkit-transform: rotate(12deg) skew(60deg);

    -moz-transform: rotate(12deg) skew(60deg);

    -ms-transform: rotate(12deg) skew(60deg);

    transform: rotate(12deg) skew(60deg);

}


.csstransforms .opened-nav  li:nth-child(3) {

    -webkit-transform: rotate(44deg) skew(60deg);

    -moz-transform: rotate(44deg) skew(60deg);

    -ms-transform: rotate(44deg) skew(60deg);

    transform: rotate(44deg) skew(60deg);

}


.csstransforms .opened-nav li:nth-child(4) {

    -webkit-transform: rotate(76deg) skew(60deg);

    -moz-transform: rotate(76deg) skew(60deg);

    -ms-transform: rotate(76deg) skew(60deg);

    transform: rotate(76deg) skew(60deg);

}


.csstransforms .opened-nav li:nth-child(5) {

    -webkit-transform: rotate(108deg) skew(60deg);

    -moz-transform: rotate(108deg) skew(60deg);

    -ms-transform: rotate(108deg) skew(60deg);

    transform: rotate(108deg) skew(60deg);

}


.csstransforms .opened-nav li:nth-child(6) {

    -webkit-transform: rotate(140deg) skew(60deg);

    -moz-transform: rotate(140deg) skew(60deg);

    -ms-transform: rotate(140deg) skew(60deg);

    transform: rotate(140deg) skew(60deg);

}


.csstransforms .opened-nav li:nth-child(7) {

    -webkit-transform: rotate(172deg) skew(60deg);

    -moz-transform: rotate(172deg) skew(60deg);

    -ms-transform: rotate(172deg) skew(60deg);

    transform: rotate(172deg) skew(60deg);

}


.no-csstransforms .cn-wrapper {

    overflow: hidden;

    margin: 10em auto;

    padding: .5em;

    text-align: center;

}


.no-csstransforms .cn-wrapper ul {

    display: inline-block;

}


.no-csstransforms .cn-wrapper li {

    float: left;

    width: 5em;

    height: 5em;

    background-color: #fff;

    text-align: center;

    font-size: 1em;

    line-height: 5em;

}


.no-csstransforms .cn-wrapper li a {

    display: block;

    width: 100%;

    height: 100%;

    color: inherit;

    text-decoration: none;

}


.no-csstransforms .cn-wrapper li a:hover,

.no-csstransforms .cn-wrapper li a:active,

.no-csstransforms .cn-wrapper li a:focus {

    background-color: #f8f8f8;

}


.no-csstransforms .cn-wrapper li.active a{

    background-color: orange;

    color: #fff;

}


.no-csstransforms .cn-button {

    display: none;

}


@media only screen and (max-width: 620px) {

    .no-csstransforms li {

        width: 4em;

        height: 4em;

        line-height: 4em;

    }

}


@media only screen and (max-width: 500px) {

    .no-ccstransforms .cn-wrapper {

        padding: .5em;

    }


    .no-csstransforms .cn-wrapper li {

        width: 4em;

        height: 4em;

        font-size: .9em;

        line-height: 4em;

    }

}


@media only screen and (max-width: 480px) {

    .csstransforms .cn-wrapper {

        font-size: .68em;

    }


    .cn-button {

        font-size: 1em;

    }

}


@media only screen and (max-width:420px) {

    .no-csstransforms .cn-wrapper li {

        width: 100%;

        height: 3em;

        line-height: 3em;

    }

}

JS

Javascript:

(function(){


    var button = document.getElementById('cn-button'),

    wrapper = document.getElementById('cn-wrapper');


    //open and close menu when the button is clicked

    var open = false;

    button.addEventListener('click', handler, false);


    function handler(){

      if(!open){

        this.innerHTML = "Close";

        classie.add(wrapper, 'opened-nav');

      }

      else{

        this.innerHTML = "Menu";

        classie.remove(wrapper, 'opened-nav');

      }

      open = !open;

    }

    function closeWrapper(){

        classie.remove(wrapper, 'opened-nav');

    }


})();

Der ursprüngliche Gesamtcode inkl. aller CSS und JS-Geschichten stammt wie gesagt von dem frei zugänglichen Beispiel das oben verlinkt ist.

Sowas in etwa wäre mein Zielvorhaben als Texteinblendung über dem ausgeklapptem Kreismenü:

Sempervivum · 13. November 2019

Damit machst Du dir keine Freunde:
https://www.coding-board.de/threads/tooltips-ueber-kreisnavigation.41261/#post-232569Warum ich in das Thema nicht eingestiegen bin: Ist zwar
1. ein netter Gag und
2. u. U. gut geeignet als Lernobjekt für CSS-Transformationen
aber nach meinem Geschmack unnötige Effekthascherei.

Ich wüsste nicht, wie man deinen Wunsch nur mit HTML und CSS umsetzen könnte. Ich sehe zwei Lösungsmöglichkeiten:
1. Die Mausposition beobachten und berechnen, über welchem Segment sich die Maus befindet. Entsprechend dem Ergebnis kannst Du dann den Tooltipp ein- und ausblenden.
2. Die Segmente mit jCanvas zeichnen. Dann kannst Du ganz einfach je einen Eventlistener für die Segmente definieren und den Tooltipp ein- und ausblenden. Die Sache mit dem Eventlistener wird dabei zwar einfach aber das Zeichnen etwas komplizierter. Auf der anderen Seite aber geradliniger als bei der CSS-Lösung.

basti1012 · 14. November 2019

Jo.
Mit CSS alleine wird das so wohl nicht gehen. Da müsste man wohl alles umbauen.
Aber da du ja schon Javascript nutzt, kannst du es ja auch nehmen.

Ich würde es so machen.

Link zur Lösung

Wegen dein Crossposting ist das nur nee 0815 Lösung

PanamaJAG · 14. November 2019

Danke für Eure Antworten und Tipps, dann werde ich mal in diese Richtungen weiter reinfuchsen!

Und ich hatte eine Frage nach Hilfe und Tipps an verschiedenen Stellen für kein Problem gehalten - verschiedene Foren = verschiedene Leute = verschiedene Ideen. Sehe ich zumindest so ;-)
Wenn das hier nicht gerne gesehen ist entschuldigt bitte, werde dann in Zukunft davon absehen.

Jan-Frederik Stieler · 24. November 2019

@PanamaJAG das ist nicht nur hier ungern gesehen. Es geht darum das wir unsere Freizeit für das Forum einsetzen und wenn Du aber vielleicht entsprechende Lösungen schon woanders bekommen hast, machen wir uns hier unnötige Arbeit.Das mindeste ist darauf hinzuweisen das Du ein Gleiches Posting im anderen Forum hinterlassen hast.

Viele Grüße

Tooltip über Kreisnavigation

PanamaJAG

Grünschnabel

Sempervivum

Erfahrenes Mitglied

basti1012

Erfahrenes Mitglied

PanamaJAG

Grünschnabel

Jan-Frederik Stieler

Monsterator

Neue Beiträge