.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } /*

Basic Tooltip

Move the mouse over the text below:

Hover over me Tooltip text

Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.

*/ /* Popup container - can be anything you want */ .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class - hide and show the popup */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } /*
Click me to toggle the popup! A Simple Popup!
ENDE Popup container - can be anything you want */ .hyphenless { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-align: justify; width: 200px; } .textmarkergelb { text-decoration: underline; -webkit-text-decoration-color: yellow; /* Safari text-decoration-color: yellow; text-decoration-style: wavy; text-decoration-style: double;*/ text-decoration: underline solid yellow 5%; } body { max-width: 99em; /* margin: 1em auto; */ margin: 1px 5px 5px 0px; /*aussenabstand oben rechts unten links*/ display: flex; flex-flow: row wrap; font-size: 1.175em; line-height: 150%; font-family: 'Open Sans', sans-serif; background-color: #b7b7b7 ; margin:0; padding:5px 5px 5px 5px; border:none; } a:link {font-weight:none; color:#00008B; text-decoration:none; } a:visited {font-weight:none; color:#7F33CC; text-decoration:none;} a:hover {font-weight:none; color:red ; text-decoration:underline; } a:active {font-weight:none; color:lime; text-decoration:underline;} a:focus { font-weight:none; color:red; text-decoration:none; } /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */ nav, nav a, article, aside, footer { border-radius: 0.5em 0.5em 0px 0px; border: 1px solid; padding: 10px; margin: 10px; flex: 1 100%; } header{ border-radius: 0.5em 0.5em 0px 0px; border: 0px solid; padding: 10px; margin: 10px; flex: 1 100%; /* padding: 1% 1% 1% 1%; innenabstand border-radius: 20px 20px 0px 0px; background-color: white;*/ box-shadow: 5px 0px 10px 0px black } header{ border-radius: 0.5em 0.5em 0px 0px; border: 0px solid; padding: 10px; margin: 10px; flex: 1 100%; /* padding: 1% 1% 1% 1%; innenabstand border-radius: 20px 20px 0px 0px; background-color: white;*/ box-shadow: 5px 0px 10px 0px black } header { background: white; margin: 1px 5px 5px 0px; /*aussenabstand oben rechts unten links*/ /*border-color: #d5d5d5;*/ display: flex; flex-flow: row wrap; } header * { flex: 1 1 0%; } header nav { flex: 1 1 100%; } nav, nav ul, nav li { margin: 0; padding: 0; border: none; } nav ul { display: flex; flex-direction: column; } nav li { list-style-type: none; margin: 1.3em 0; flex: 1 1 100%; } nav a, nav span { display: inline-block; width: 95%; background: #fffbf0; border: 1px solid #dfac20; margin: 0; text-decoration: none; text-align: center; } nav span { line-height: 250%; } nav a:hover { background-color: #dfac20; } article { background: #ffede0; border-color: #df6c20; } grundbox { text-align: justify; /*text-justify: inter-word;*/ background: white; border: 0px solid ; border-color: black; padding: 10px; /*innenabstand*/ margin: 1px 5px 5px 0px; /*aussenabstand oben rechts unten links*/ flex: 1 100%; } grundboxrund{ background-color: white; border-radius: 0.5em 0.5em 0px 0px; border: 0px solid; padding: 10px; margin: 1px 5px 15px 0px; /*aussenabstand oben rechts unten links*/ flex: 1 100%; /* padding: 1% 1% 1% 1%; innenabstand border-radius: 20px 20px 0px 0px; background-color: white;*/ box-shadow: 5px 0px 10px 0px black } aside { background: #ebf5d7; border-color: #8db243; } footer { background: #e4ebf2; border-color: #8a9da8; display: flex; flex-flow: row wrap; } footer * { flex: 1 1 0%; justify-content: space-between; } footer p { text-align: right; } /* nebeneinander bei ausreichender Breite */ @media all and (min-width: 35em) { nav ul { flex-direction: row; } nav li { margin: 0 10px; flex: 1 1 0%; } article { flex: 3 1 0%; } aside { flex: 1 1 0%; } } /*responsive für images*/ .responsive { width: 50%; max-width: 220px; height: auto; } .stammdaten { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:left; width:22%; /* The width is 20%, by default */ } .nachrichten { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:left; width:20%; /* The width is 60%, by default */ } .videos { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:left; width:18%; /* The width is 20%, by default */ } .eintraege { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:left; width:18%; /* The width is 20%, by default */ } .banner { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:left; width:18%; /* The width is 20%, by default */ } .newsletter { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:left; width:18%; /* The width is 20%, by default */ } .unten { background-color:#f1f1f1; margin: 2px 2px 2px 2px; padding:5px; float:botton; width:100%; /* The width is 20%, by default */ } @media (prefers-color-scheme: dark) { body{ background: rgb(23, 23, 24); color: #ed7070; } a:link {font-weight:none; color:#8ab4f8; text-decoration:none; } a:visited {font-weight:none; color:#c58af9; text-decoration:none;} a:hover {font-weight:none; color:red ; text-decoration:underline; } a:active {font-weight:none; color:lime; text-decoration:underline;} a:focus { font-weight:none; color:red; text-decoration:none; } header { background: rgb(23, 23, 24); color: beige; } h1{ color: beige; } h2{ color: beige; } h3{ color: beige; } h4{ color: beige; } div{ color: beige; } grundboxrund{ color: beige; background-color: rgb(31, 29, 29); box-shadow: 5px 0px 10px 0px black } grundbox{ color: beige; background-color: rgb(36, 33, 33); box-shadow: 5px 0px 10px 0px black } /* img { filter: grayscale(30%); } */ img { opacity: .65; transition: opacity .5s ease-in-out; } img:hover { opacity: 1; } #menu li.topmenu { /* background-color:white;*/ background-color: rgb(31, 29, 29); border-color: #ccc; width:100%; border-width: 2px 0px 0px 2px; border-style: solid; float:left; border-radius: 10px 0px 0px 0px; z-index:500; } .form-input, .input-group .input-group-addon { border: .05rem solid #5e6b80; } .form-input, .input-group .input-group-addon { background: #21325a; color: #b7becb; } .form-input:focus, .form-input:not(:placeholder-shown):invalid:focus { background: #0F1930; } .form-select:not([multiple]):not([size]) { background: #21325a url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem } /*layout spaltestammdaten*/ .stammdaten { background-color:#292728; margin: 2px 2px 2px 2px; border-color: #ccc; border:5px; padding:5px; float:left; width:17%; /* The width is 20%, by default */ } .nachrichten { background-color:#292728; margin: 2px 2px 2px 2px; padding:5px; float:left; width:17%; /* The width is 60%, by default */ } .videos { background-color:#292728; margin: 2px 2px 2px 2px; padding:5px; float:left; width:17%; /* The width is 20%, by default */ } .eintraege { background-color:#292728; margin: 2px 2px 2px 2px; padding:5px; float:left; width:17%; /* The width is 20%, by default */ } .banner { background-color:#292728; margin: 2px 2px 2px 2px; padding:5px; float:left; width:17%; /* The width is 20%, by default */ } .newsletter { background-color:#292728; margin: 2px 2px 2px 2px; padding:5px; float:left; width:17%; /* The width is 20%, by default */ } .fifty { background-color:#d15f98; margin: 2px 2px 2px 2px; padding:5px; float:left; width:50%; /* The width is 20%, by default */ } .unten { background-color:#292728; margin: 2px 2px 2px 2px; padding:5px; float:botton; width:100%; /* The width is 20%, by default */ } }