За последние 24 часа нас посетили 21014 программистов и 1107 роботов. Сейчас ищут 464 программиста ...

позиционирование всплывающей подсказки

Тема в разделе "HTML и CSS", создана пользователем logovo, 22 май 2019.

  1. logovo

    logovo Новичок

    С нами с:
    18 янв 2017
    Сообщения:
    15
    Симпатии:
    2
    На сайте есть некоторый текст, при наведении на отдельные слова в котором должна появляться всплывающая подсказка. Реализовал это так:

    Код (CSS):
    1. wr {position: relative;border-bottom: 1px dashed #000080;}
    2. wr span {visibility: hidden;position: absolute;width:300px;bottom: 100%; z-index: 999;margin-left: 250px;display: block; padding: 1em;background: #fff;border: dotted 1px black;display: flex;font-size: 7pt;text-align: left;line-height: 2em;}
    3. wr > span > img {width:60px;height:81px;margin: 0 20px 0 0;}
    4. wr:hover span {visibility: visible;}
    вот пример вхождения

    HTML:
    1. Здесь много текста <wr>Наоми Новик<span><img src="здесьпутькфото"><div><b>Наоми Янина Новик</b><br>(род. 30.04.1973)<br> американская писательница-фантаст, лауреат премий Джона Кэмпбелла и Locus.</div></span></wr> здесь ещё текст.
    Проблема в том, что у меня не получается позиционировать всплывающую подсказку над ссылкой/курсором. Я понимаю, почему это так, margin привязан к родительскому элементу, который во всю страницу, следовательно привязать позиционирование можно только к краю текста. Но как-то же такие вещи делают?
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
  3. logovo

    logovo Новичок

    С нами с:
    18 янв 2017
    Сообщения:
    15
    Симпатии:
    2
    в тайтл нельзя загнать картинку и теги, тайтл не регулируется стилями.
     
  4. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
  5. logovo

    logovo Новичок

    С нами с:
    18 янв 2017
    Сообщения:
    15
    Симпатии:
    2
    а подробнее?
     
  6. master-web

    master-web Новичок

    С нами с:
    29 май 2019
    Сообщения:
    44
    Симпатии:
    16
    Вот сделал нечто похожее
    HTML:
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <meta charset="UTF-8">
    4.     <title>Document</title>
    5.     <style>
    6.         .alert-wrap{
    7.             display: inline-block;
    8.         }
    9.         .alert-link{
    10.             color: blue !important;
    11.             cursor: pointer;
    12.         }
    13.         .alert{
    14.           width: 100%;
    15.           height: 0;
    16.           position: relative;
    17.           display: flex;
    18.           flex-direction: column;
    19.           justify-content: flex-start;
    20.           align-items: center;
    21.         }
    22.         .alert-box{
    23.           display: none;
    24.           position: absolute;
    25.           width: 250px;
    26.           max-width: 100vw;
    27.           background: #000;
    28.           padding: 10px;
    29.           color: #fff;
    30.           z-index: 2;
    31.         }
    32.         .alert-link:hover+.alert>.alert-box{
    33.             display: block;
    34.         }
    35.     </style>
    36. </head>
    37.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    38.         <span class="alert-wrap">
    39.             <span class="alert-link">Repellat</span>
    40.             <span class="alert">
    41.                 <span class="alert-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
    42.             </span>
    43.         </span>
    44.          in atque voluptatum, minima quam voluptate rerum ipsa vel tempore perspiciatis non, iure odio dicta voluptatibus. Possimus iste modi repellendus mollitia.</p>
    45.     <p>Debitis cum voluptates sed commodi maxime quidem magnam, non assumenda inventore in nemo, dolore, voluptas quam. Itaque quos dolorem architecto deserunt adipisci delectus mollitia! Ut laboriosam perferendis delectus nemo aliquid.</p>
    46. </body>
    47. </html>
     
    logovo нравится это.
  7. logovo

    logovo Новичок

    С нами с:
    18 янв 2017
    Сообщения:
    15
    Симпатии:
    2
    О! О флексах-то я и не подумал. Спасибо, это решение.