|
|
| (не показана 21 промежуточная версия этого же участника) |
| Строка 1: |
Строка 1: |
| <span class="alt-tooltip"><span style="color:{{{color|#e1f6ff}}};font-weight:{{{font-weight|normal}}};">{{{1|ваш текст}}}</span><!-- | | <div class="alt-tooltip"><div style="display:unset; {{#if:{{{no-text-decoration|}}}||border-bottom:1px dotted var(--theme-text-color-dark)}}>{{{1|ваш текст}}}</div><!-- |
|
| |
|
| --><span class="alt-tooltiptext" style="color:lightgrey; z-index: 150 !important; | | --><div class="alt-tooltiptext" style="font-weight:normal; font-style:normal; color:var(--theme-text-color-header); z-index: 1500 !important;{{#switch:{{{posX|}}}|left=left:unset;right:-24px;|right=left:24px;right:unset;|}}{{#switch:{{{posY|}}}|top=top:-25px;}}><!-- |
| {{#switch:{{{posX|}}}|left=left:unset;right:0;|right=left:0;right:unset;|}}{{#switch:{{{posY|}}}|top=top:-25px;}}"><!-- | |
| | | |
| --><span style="display: block;text-align: center; z-index: 150 !important;">{{#if:{{{img|}}}|[[File:{{{img}}}|middle|96px]]|}}</span><!-- | | --><div style="display: block;text-align: center; z-index: 1500 !important;">{{#if:{{{img|}}}|[[File:{{{img}}}|middle|96px]]|}}</div><!-- |
|
| |
|
| --><span style="display: block;text-align: left; z-index: 150 !important;text-wrap:wrap;">{{{2|Название}}}</span><!-- | | -->{{#if:{{{2|}}}|{{#if:{{{3|}}} |
| | | | <!-- Если есть 3 параметр --> |
| -->{{#if:{{{3|}}}|<span style="display: block;text-align: left;line-height: 15px;font-size:85%; z-index: 150 !important;"><br>{{{3|Описание}}}{{#if:{{{4|}}}|<br>{{{4}}}</span>|}}}}
| | <div style="display:block; text-align:left; z-index: 1500 !important; text-wrap:wrap; font-size:var(--font-size-l); font-weight:bold;">{{{2}}}</div><div style="display:block; text-align:left; line-height:20px; font-size:var(--font-size-s); z-index:1500 !important;">{{{3}}}</div> |
| </span></span>
| | | <!-- Если есть только 2 параметра --> |
| <!-- | | <div style="display:block; text-align:left; line-height:20px; font-size:var(--font-size-s); z-index:1500 !important;">{{{2}}}</div>}}}}</div></div><templatestyles src="AltTooltip/styles.css" /> |
| | |
| -->{{#css: | |
| .alt-tooltip {
| |
| position: relative;
| |
| display: inline;
| |
| cursor: help;
| |
| }
| |
| | |
| .alt-tooltiptext {
| |
| position: absolute;
| |
| width: 320px;
| |
| right: -200px;
| |
| left: -140px;
| |
| top: 100%;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| z-index: 99;
| |
| pointer-events: none;
| |
| visibility: hidden;
| |
| transition: all 0.1s;
| |
| padding: 2px 6px;
| |
| box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
| |
| border: 1px solid #5a5a6d;
| |
| background-color: #282831f0;
| |
| font-weight: 400;
| |
| font-size: 14px;
| |
| font-family: "noto sans";
| |
| }
| |
| | |
| .alt-tooltip:hover>.alt-tooltiptext {
| |
| visibility: visible;
| |
| opacity: 1;
| |
| transition-delay: 0.05s;
| |
| }
| |
| | |
| @media screen and (max-width: 850px) {
| |
| .alt-tooltip {
| |
| position: static
| |
| }
| |
| | |
| .alt-tooltiptext {
| |
| box-shadow: 0px 0px 100vw 100vh rgb(0 0 0 / 60%);
| |
| position: fixed!important;
| |
| width: 80vw !important;
| |
| top: 40vh !important;
| |
| left: 0 !important;
| |
| margin: 0 auto !important;
| |
| right: 0!important;
| |
| }
| |
| } | |
| }} | |