Страницы

Поиск по вопросам

понедельник, 25 ноября 2019 г.

Tooltip с вырезами у стрелки 


Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковы
полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы.



Мой код:



.tooltip {
  display: inline-block;
  position: relative;
  padding: 10px;
  background-color: #0391fd;
  color: white;
  border-radius: 6px;
}

.tooltip:before {
  display: block;
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #0391fd;
  transform: translateX(-50%);
}

Текст





Как сделать прозрачные вырезы?

Уточнение: в Tooltip должен вставляться текст. При этом тело Tooltip должно быт
резиновым, т.е. размер Tooltip должен изменяться под текст внутри


Ответы

Ответ 1


CSS решение

Это можно реализовать обычной версткой. Без дополнительной графики, кроссбраузерно.



.back {
  width: 850px;
  height: 640px;
  background: url(http://orig09.deviantart.net/5063/f/2012/219/c/4/inari_fox__ivory_by_santani-d5a465m.jpg);
}

.tooltip {
  min-width: 50px;
  max-width: 300px;

  /* Стили ниже только для демонстрации. Можно удалить. */
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

.tooltip .content {
  border-radius: 10px 10px 0 0;
  background: #3f51b5;
  padding: 10px;
  color: #fff;
}

.tooltip .footer {
  position: relative;
  display: flex;
}

.tooltip .footer .left {
  flex: 1 1 auto;
  position: relative;
  border-bottom: 10px solid #3f51b5;
  border-right: 10px solid transparent;
  border-bottom-left-radius: 10px;
}

.tooltip .footer .circle {
  position: absolute;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  border-top: 1px solid #3f51b5;
}

.tooltip .footer .circle:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip .footer .left .circle {
  right: -5px;
  border-left: 1px solid #3f51b5;
}

.tooltip .footer .left .circle:after {
  top: -3px;
  left: -3px;
  border-right: 3px solid #3f51b5;
  border-top: 2px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(45deg);
}

.tooltip .footer .right {
  flex: 1 1 auto;
  position: relative;
  border-bottom: 10px solid #3f51b5;
  border-left: 10px solid transparent;
  border-bottom-right-radius: 10px;
}

.tooltip .footer .right .circle {
  left: -5px;
  border-right: 1px solid #3f51b5;
}

.tooltip .footer .right .circle:after {
  top: -3px;
  right: -3px;
  border-left: 3px solid #3f51b5;
  border-top: 3px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
}

.tooltip .footer .center {
  flex: 0 0 28px;
  position: relative;
}

.tooltip .footer .center:after {
  content: '';
  position: absolute;
  left: -6px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid #3f51b5;
  border-right: 20px solid transparent;
}


    

        

            Lorem ipsum
        

        

            

            

            

        

    


    

        

            Lorem ipsum dolor sit amet
        

        

            

            

            

        

    


    

        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu mauris ut nisl pretium sollicitudin.
        

        

            

            

            

        

    


    

        

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum e
mauris ut nisl pretium sollicitudin. Cras laoreet accumsan eros vitae ultrices. Cra
sit amet iaculis quam. Nullam bibendum lorem quis viverra euismod. Ut sagittis nec nis
sodales euismod. Vivamus eget ornare augue. Morbi ultricies at augue eget vestibulum
Nullam a dapibus libero, fermentum pretium leo. Cras ac sagittis ex, in mattis ante. Sed lobortis vehicula orci, pulvinar pulvinar orci consectetur eu. Sed accumsan, lorem ut lacinia tempus, tortor tellus venenatis nisi, a tincidunt quam nibh commodo erat. Vestibulum posuere, risus eu efficitur interdum, orci diam molestie est, id sodales neque mi nec ipsum. Donec consectetur sit amet ligula quis gravida. Nunc in finibus nisi. Morbi at neque mi.
        

        

            

            

            

        

    







В данном примере используется flex-box в футере. Если очень нужно поддерживать IE <= 9, можно заменить на классический аналог.


Ответ 2


SVG решение

В любом векторном редакторе, например: Inkscape, рисуем предложенный автором вопроса tooltip     

    

Я сделал крупный рисунок, чтобы были видны узлы патча: всего их 15:
8 – закругленные углы прямоугольника, 6 контуры вырезов, 1 – вершина треугольника.

Далее делаю оптимизацию кода SVG с помощью SVG-editor  

Ниже пример кода tooltip   




  
  


    

Пример анимации tooltip

Интересные эффекты могут быть реализованы при плавной анимация перехода патча и
одной формы в другую. Допустим из прямоугольника в данный tooltip
Для этого используется анимация атрибута d="M20 ..". Указывается начальное значение и конечное.
 Самое главное, чтобы количество узлов патча в начальном и конечном положении совпадало!   

Для этого снова загружаем файл в Inkscape и перемещаем узлы, как показано на рисунке ниже:     

Получаем новый патч с 15 узлами, но это уже прямоугольник        




 
  





Далее добавляем команду анимации атрибута d  

 
  

    
      
        
          
          
        
        click me


Ответ 3



Вариант №1 (новый) создаём дополнительный элемент в DOM так как без него это реализовать на css не возможно , я применил свободное пространство имён html,body{ height:100%; background:url(https://walldeco.ua/img/gallery/29/thumbs/thumb_l_2971.jpg); background-size:cover; } a{ padding:6px 10px; border:1px solid #fff; text-decoration:none; color:#fff; position:relative; top:50px; left:50px; } tooltipe{ display:none; width:100%; height:100px; position:absolute; transform:translate(-100%,70px); overflow:hidden; } left{ display:block; width:50%; height:100%; background:red; position:absolute; left:-33px; transform:skew(-21deg); } right{ display:block; width:50%; height:100%; background:red; position:absolute; right:-33px; transform:skew(21deg); } right:after{ content:""; position:absolute; display:block; width:200px; height:80px; background:red; left:-90%; top:20px; transform:skew(-21deg); } a.tool:hover:after{ content:""; display:block; position:absolute; border:18px solid transparent; border-bottom:50px solid red; left:41.5%; top:40px; } a:hover tooltipe{ display:inline-block; } tooltext{ display:block; position:absolute; left:0; padding:15px; } Это текст на которыйнадо сделать подсказку

Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.

 Вариант не очень (требуется доработать) №2 * { margin: 0; padding: 0; font-size: 20px; letter-spacing: 2px; } html, body { padding: 10px; } span.tooltipe { background-color: #ccc; padding: 0 10px; border-radius: 4px; position: relative; z-index: 100; color: #fefefe; } span.tooltipe a { text-decoration: none; color: #fefefe; display: inline-block; } .tool { position: absolute; display: inline-block; width: 328px; height: 0; border: 1px solid #ccc; top: 80px; left: 0; padding: 20px; padding-top: 50px; background: transparent; } .overlay { display: block; background: #000; padding: 10px; width: 350px; position: relative; z-index: 100; left: -20px; text-align: center; } .tool cover { position: absolute; width: 100%; height: 70px; top: 0; left: 0; z-index: -1; background: rgba(0, 0, 0, .4); } .tool:after { content: ""; position: absolute; border-width: 70px 140px 0px 0; border-style: solid; border-color: #000 transparent; top: 0; left: 0; z-index: 10; } .tool:before { content: ""; position: absolute; border-width: 0 140px 70px 0; border-style: solid; border-color: transparent #000; top: 0; z-index: 10; right: 0; } cover:after { content: ""; display: block; position: absolute; top: 0; left: 4%; border: 170px solid transparent; border-bottom: 70px solid #000; border-top: 0px solid #000; z-index: 210; } cover:before { content: " v "; display: block; color: red; position: absolute; top: -15px; left: 44%; transform: rotate(180deg)scaleX(12)scaleY(3); color: transparent; text-shadow: 0 0 1px rgba(0, 0, 0, .7); } .tool, .overlay, cover { display: none; } span.tooltipe:hover .tool, .overlay, cover { display: block; }

Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt Curabitur arcu pretium ut lacinia in Quisque velit nisi, , elementu id enim. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo ege malesuada. Sed porttitor lectus nibh. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. nibh pulvinar a. erat, accumsan id imperdiet et, porttitor at sem.Vivamus suscipi tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.

Вариант №3 (уже видели его) * { margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; } a { display: inline-block; padding: 10px 20px; border: 1px solid #ccc; position: relative; font-size: 20px; color: #ccc; } a:hover { background-color: #ccc; color: #fefefe; } a[tooltipe]:hover:after { content: attr(tooltipe); display: inline-block; white-space: pre; position: absolute; top: 60px; left: 50%; color: #fefefe; cursor: default; pointer-events: none; border: 3px solid #fefefe; padding: 10px 20px; background: #cc0000; } a[tooltipe]:hover:before { content: ""; display: inline-block; position: absolute; top: 53px; left: 80%; color: #cc0000; background-image: linear-gradient(to bottom right, #cc0000, #cc0000, #cc0000); cursor: default; pointer-events: none; border: 4px solid #fefefe; background: ; width: 20px; height: 20px; z-index: 1; transform: rotate(45deg); border-bottom: transparent; border-right: transparent; } Некий понт на css Вариант №4 не адаптивный :к сожалению по ссылке смотреть

Ответ 4



Градиенты + псевдоэлементы + 1 вложенный элемент. body { background-image: linear-gradient(to right, white, rebeccapurple); display: flex; flex-direction: column; min-height: 100vh; } .tooltip { position: relative; display: inline-block; border-radius: 10px; padding: 15px 25px 25px; color: #fff; font-size: 22px; background: linear-gradient(to bottom, #0391fd calc(100% - 10px), transparent calc(100% - 10px)), radial-gradient(circle at 50% 100%, transparent 24px, #0391fd 25px); margin: auto; } .tooltip:before, .tooltip:after { position: absolute; content: ' '; bottom: 0; left: 0; width: 50%; height: 11px; border-bottom-left-radius: 10px; background-image: linear-gradient(45deg, #0391fd calc(100% - 18px), transparent calc(100% - 18px)); } .tooltip:after { left: auto; right: 0; border-bottom-right-radius: 10px; background-image: linear-gradient(-45deg, #0391fd calc(100% - 18px), transparent calc(100% - 18px)); } .tooltip__arrow { position: absolute; left: calc(50% - 21px); bottom: -10px; width: 0; height: 0; border-style: solid; border-width: 21px 21px 0 21px; border-color: #0391fd transparent transparent transparent; }
Это какой-нибудь текст для примера

текст чуть поменьше


Ответ 5



Режем низ на три части и с помощью православного calc наводим порядок: body { background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3; background-size: 20px 20px; } .tooltip { margin: 50px; } .tooltip-top { background: #0391fd; color: #FFF; text-align: center; border-radius: 10px 10px 0 0; padding: 10px 5px; font-family: Verdana, sans-serif; } .tooltip-bottom { height: 15px; overflow: visible; } .tooltip-bottom-left { background: #0391fd; float: left; width: calc(50% - 30px); height: 15px; border-radius: 0 0 0 10px; } .tooltip-bottom-center { float: left; background: url('https://i.stack.imgur.com/Nw7uL.png'); width: 60px; height: 41px; background-size: 60px 41px; } .tooltip-bottom-right { background: #0391fd; float: left; width: calc(50% - 30px); height: 15px; border-radius: 0 0 10px 0; }
Тултипчик
Тултип
Тултипище
c тултипом-женой
и тултипятами
Сорян за косо обрезанную картинку.

Ответ 6



Магия clip-path и 6 вложенных элементов. *, *:before, *:after { box-sizing: border-box; } html { height: 100vh; background-image: linear-gradient(to right, #ecdff9, #af7fe0); background-size: 100% 100%; } body { height: 100%; margin: 0 10px; } .tooltip { position: relative; display: inline-block; margin: 10px auto; } .tooltip__block { display: block; font-size: 28px; color: #fff; font-family: Arial; background-color: #0391fd; padding: 20px 35px 50px; width: 100%; height: 100%; border-radius: 15px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 90px) 100%, calc(50% + 90px) calc(100% - 30px), calc(50% - 90px) calc(100% - 30px), calc(50% - 90px) 100%, 0 100%); } .tooltip__arrow { position: absolute; left: calc(50% - 85px); top: calc(100% - 30px); height: 60px; width: 170px; background-color: #0391fd; clip-path: polygon(0 0, 100% 0, 50% 100%); } .tooltip__circle { display: block; position: absolute; top: calc(100% - 30px); width: 7px; background-image: radial-gradient(circle, transparent 40%, #0391fd 60%); } .tooltip__circle:before { float: left; content: ''; padding-top: 100%; } .tooltip__circle--left { left: calc(50% - 91px); clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); } .tooltip__circle--right { right: calc(50% - 91px); clip-path: polygon(50% 0, 50% 50%, 100% 50%, 100% 0); } .tooltip__triangle { width: 36px; background-color: #0391fd; position: absolute; bottom: 0; } .tooltip__triangle:before { float: left; padding-top: 72%; content: ''; } .tooltip__triangle--left { left: calc(50% - 91px); clip-path: polygon(0 0, 100% 100%, 0 100%); } .tooltip__triangle--right { right: calc(50% - 91px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
Текст в тултипе



Чертовски длинный текст в тултипе, чтобы показать, что блок тянется


Ответ 7



Первый мой ответ был опубликован до объявления конкурса и не совсем выполнял ег условия. Поэтому публикую новый ответ. Если я правильно понял задачу, то необходимо было выполнить следующие условия: Вёрстка должна быть полностью адаптивна Вырезы на тултипе должны быть прозрачны Тултип должен растягиваться по горизонтали в зависимости от длины текста в тултипе и по вертикали (желательно), если строчек больше одной. Пример ниже полностью адаптивен: блоки, тултипы, текст. Проверена работоспособность в IE11, Firefox, Chrome, Opera Вывод Tooltip
Морж
Харьковски дельфинарий
Дельфины и мяч
Масштабирование тултипа осуществляется командой - transform="scale(2.2 0.75)", гд первая цифра это увеличение по горизонтали, вторая уменьшение высоты. Это пример для однострочного тултипа на второй картинке (Харьковский дельфинарий) Важный атрибут viewBox выполняет сразу несколько задач: Адаптивность svg изображения Обязательным условием для выполнения этого является,- либо отсутствие viewport шапке svg файла, либо задание высоты и ширины окна просмотра браузера в процентах. Если не указан viewport то значения по умолчанию - width="100%" и height="100%" от размеров окна браузера. Параметры viewBox="5 0 240 240" (не путать с viewport) Первые две цифры отвечают за смещение svg изображения по осям X, Y 3,4 цифры отвечают за масштабирование изображения внутри viewport При изменении этих параметров необходимо помнить, что: У viewBox всё наоборот. Поэтому, если вправо перемещаем viewBox - min-x > 0, то изображение сдвигается влево. Подробнее тут и тут. Если увеличиваем viewBox, то изображение уменьшается. Это всё применяется для позиционирования и масштабирования тултипа. Клонирование тултипа Для этого применяется команда use Как видно в этой команде делается дополнительной позиционирование тултипа по вертикали и горизонтали. Цифры только в процентах, иначе svg не будет масштабироваться! Чтобы осуществить стилизацию клонов тултипа из внутренней или из внешней таблиц стилей необходимо применить принудительное наследование svg path { fill:inherit; } А в самом path заполнение fill обязательно удалить! Перенос текста В SVG нет автоматического переноса текста, как в html Поэтому приходится использовать тег Дельфины и мяч Но думаю это не критично, так как размещение и заполнение тултипа делается при вёрстке Html.

Ответ 8



Думаю это белые полосы, наложенные поверх .tooltip:before { display: block; content: ''; position: absolute; top: 10%; left: 50%; width: 2px; height: 14px; background-color: #fff; border-radius: 1px 1px 1px 1px; transform: rotate(45deg); z-index: 1; } .tooltip:after { display: block; content: ''; position: absolute; top: 10%; left: 36%; width: 2px; height: 14px; background-color: #fff; border-radius: 1px 1px 1px 1px; transform: rotate(-45deg); z-index: 1; } Попробуй так сделать, а треугольник можешь добавить через div, так как before и after заняты.

Автор: на
Ярлыки: , , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)