#html #css
#HTML #CSS
Вопрос:
Я попытался создать подсказку внутри ячейки таблицы, чтобы показывать слишком длинный текст при наведении курсора мыши; Я использовал стиль css text-overflow: ellipsis; , чтобы скрыть переполнение длинного текста внутри ячейки таблицы.
Тогда проблема в том, что моя подсказка для длинного текста была слишком далека от исходного текста, даже если я думал, что уже скрыл переполнение текста и вырезал некоторые из них в стиле css.
Вот что я сделал:
table { width: 40%; table-layout: fixed; } th { text-align: left; } td:first-child { text-align: center; } td.td-name p.name { text-overflow: ellipsis; overflow: hidden; width: 100%; white-space: nowrap; } [data-tooltip]::after { position: absolute; /*width: 140px;*/ /*left: calc(50% - 70px);*/ /*bottom: 90%;*/ text-align: center; box-sizing: border-box; content: attr(data-tooltip); background: rgba(0, 0, 0, 0.5); padding: 8px; border-radius: 10px; font-size: 0.9em; font-weight: bold; z-index: 200; color: #fff; visibility: hidden; opacity: 0; transform: translate(-20px, 20px); transition: all .3s ease-in-out; } td.td-name:hover [data-tooltip]::after { opacity: 1; visibility: visible; } lt;table border="1"gt; lt;thead style=""gt; lt;trgt; lt;th style="width: 5%;"gt;Previewlt;/thgt; lt;th style="width: 15%;"gt;Namelt;/thgt; lt;th style="width: 5%;"gt;Sizelt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td style="width: 50%;"gt; lt;img src="https://picsum.photos/40" alt=""gt; lt;/tdgt; lt;td class="td-name" style="width: 15%;"gt; lt;p data-tooltip="document-attachment-20211130-41110PM.zip"gt;document-attachment-20211130-41110PM.ziplt;/pgt; lt;/tdgt; lt;td style="width: 5%;"gt; lt;p class="size"gt; lt;stronggt;28.5 KBlt;/stronggt; lt;/pgt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td style="width: 50%;"gt; lt;img src="https://picsum.photos/40" alt=""gt; lt;/tdgt; lt;td class="td-name" style="width: 15%;"gt; lt;p class="name" data-tooltip="upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip"gt;upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.ziplt;/pgt; lt;/tdgt; lt;td style="width: 5%;"gt; lt;p class="size"gt; lt;stronggt;28.5 KBlt;/stronggt; lt;/pgt; lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; Я попытался изменить левое положение всплывающей подсказки, а также установить относительное положение к абзацу самой подсказки, но это не помогло. Большое спасибо.
Комментарии:
1. В safari я не вижу вашей пользовательской всплывающей подсказки для обрезанного текста. Браузер отображает всплывающую подсказку html, как если бы вы установили
title="upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip"вместо этого. Я немного погуглил, и это, похоже, проблема исключительно для safari. Я понимаю, почему появляется всплывающая подсказка, сгенерированная браузером, но кто-нибудь знает, должна ли она переопределять и отменять эффект наведения?
Ответ №1:
Если вы добавите display:flex в свой [data-tooltip]::after , то это должно решить проблему. Оттуда вы можете точно настроить его местоположение.
table { width: 40%; table-layout: fixed; } th { text-align: left; } td:first-child { text-align: center; } td.td-name p.name { text-overflow: ellipsis; overflow: hidden; width: 100%; white-space: nowrap; } [data-tooltip]::after { position: absolute; display: flex; /*width: 140px;*/ /*left: calc(50% - 70px);*/ /*bottom: 90%;*/ text-align: center; box-sizing: border-box; content: attr(data-tooltip); background: rgba(0, 0, 0, 0.5); padding: 8px; border-radius: 10px; font-size: 0.9em; font-weight: bold; z-index: 200; color: #fff; visibility: hidden; opacity: 0; transform: translate(-20px, 20px); transition: all .3s ease-in-out; } td.td-name:hover [data-tooltip]::after { opacity: 1; visibility: visible; } lt;table border="1"gt; lt;thead style=""gt; lt;trgt; lt;th style="width: 5%;"gt;Previewlt;/thgt; lt;th style="width: 15%;"gt;Namelt;/thgt; lt;th style="width: 5%;"gt;Sizelt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td style="width: 50%;"gt; lt;img src="https://picsum.photos/40" alt=""gt; lt;/tdgt; lt;td class="td-name" style="width: 15%;"gt; lt;p data-tooltip="document-attachment-20211130-41110PM.zip"gt;document-attachment-20211130-41110PM.ziplt;/pgt; lt;/tdgt; lt;td style="width: 5%;"gt; lt;p class="size"gt; lt;stronggt;28.5 KBlt;/stronggt; lt;/pgt; lt;/tdgt; lt;/trgt; lt;trgt; lt;td style="width: 50%;"gt; lt;img src="https://picsum.photos/40" alt=""gt; lt;/tdgt; lt;td class="td-name" style="width: 15%;"gt; lt;p class="name" data-tooltip="upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.zip"gt;upload-to-cloud-form-design-for-mobile-web-application-upload-to-cloud-form-design-for-mobile-web-application.ziplt;/pgt; lt;/tdgt; lt;td style="width: 5%;"gt; lt;p class="size"gt; lt;stronggt;28.5 KBlt;/stronggt; lt;/pgt; lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; Комментарии:
1. большое спасибо, теперь все работает хорошо.