From Dark and Darker Wiki
|
|
| (95 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| Testing
| | <tabber> |
| | |-|Tab1= |
| | content1 |
| | |-|Tab2= |
| | content2 |
| | |-|{{TabNameTest}}= |
| | content3 |
| | </tabber> |
|
| |
|
|
| |
|
| .tooltip {
| | {{TabToggle|1|Tab1}} |
| position: relative;
| | {{TabToggle|2|Tab2}} |
| display: inline-block;
| | {{TabToggle|3|{{TabNameTest}}}} |
| border-bottom: 1px dotted black;
| |
| } | |
|
| |
|
| .tooltip .tooltiptext {
| | <div class="1-data All-data" style="display:none;"> |
| visibility: hidden;
| | content1</div> |
| width: 120px;
| | <div class="2-data All-data" style="display:none;"> |
| background-color: black;
| | content2</div> |
| color: #fff;
| | <div class="3-data All-data" style="display:none;"> |
| text-align: center;
| | content3</div> |
| border-radius: 6px;
| |
| padding: 5px 0;
| |
| | |
| /* Position the tooltip */
| |
| position: absolute;
| |
| z-index: 1;
| |
| }
| |
| | |
| .tooltip:hover .tooltiptext {
| |
| visibility: visible;
| |
| }
| |
| </style> | |
| <body style="text-align:center;"> | |
| | |
| <h2>Basic Tooltip</h2>
| |
| | |
| <p>Move the mouse over the text below:</p>
| |
| | |
| <div class="tooltip">Hover over me | |
| <span class="tooltiptext">Tooltip text</span>
| |
| </div> | |
| | |
| <p>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.</p>
| |
Latest revision as of 14:58, 25 September 2024
content1
content2
content3
Tab1
Tab2
MyCoolTabName
content1
content2
content3
