У меня есть чистая подсказка CSS, созданная с использованием псевдоэлементов, которая берет содержимое для атрибута. Как добавить ссылку на подсказку? - PullRequest
Новая
       25

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

1 голос
/ 12 марта 2019

Это мой HTML 

<div class="tooltip" tooltip-data="Hi, I'm a tooltip">Div with standard tooltip. Hover me to see the tooltip.
</div>

Это мой CSS 

.tooltip:before {

    content: attr(tooltip-data);
    position: absolute;
    opacity: 0;
    margin-left: 200px;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

.tooltip:hover:before {
    opacity: 1;
    background: yellow;
    margin-top: 0px;
    margin-left: 220px;    
}


.tooltip {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
    width: 200px;
}

Я сделал это JSfiddle

Я бы хотел сделать подсказку более стильной и со ссылкой

Я хотел бы иметь:

  • жирный большой заголовок - разрыв строки
  • короткое предложение - разрыв строки
  • ссылка

Ответы [ 3 ]

1 голос
/ 12 марта 2019

Вы можете сделать это, добавив дополнительный div и используя CSS.

По сути, это ручная подсказка, которая вам понадобится, поскольку вы не можете вставить HTML в поле данных всплывающей подсказки.

Надеюсь, этот фрагмент кода поможет!

РЕДАКТИРОВАТЬ: добавлены разрывы строк. 

.tooltip:before {
    content: attr(tooltip-data);
    position: absolute;
    opacity: 0;
    margin-left: 200px;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

.tooltip:hover .tooltip-content {
    opacity: 1;
    background: yellow;
    margin-top: 0px;   
}

.tooltip-content {
  position: absolute;
  opacity: 0;
  border-radius: 12px;
  padding: 10px;
  margin-left: 220px;
  top: 3%;
}

.tt-title {
  font-weight: bold;
}

span {
  display: block;
}

.tooltip {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
    width: 200px;
}
<div class="tooltip">Div with standard tooltip. Hover me to see the tooltip.
  <div class="tooltip-content">
  <span class="tt-title">Bold title</span> <span>short sentence</span> <a href="#"">link</a>
  </div>
</div>
0 голосов
/ 12 марта 2019

Псевдоконтент имеет некоторые ограничения, и мы не можем использовать его для размещения HTML элементов. Тем не менее, мы все еще можем сделать некоторые интересные вещи, создав собственную подсказку на основе тегов.

  • Улучшение производительности (особенно на мобильных устройствах) с использованием transform для движения вместо margin
  • Улучшение UX благодаря отображению всплывающей подсказки с помощью клавиши табуляции
  • Улучшение внешнего вида с помощью transform масштабирования всплывающей подсказки
  • Улучшение доступности с использованием role=tooltip

.tooltip-wrapper {
  border: 1px solid silver;
  background: #ddd;
  margin: 20px;
  padding: 10px;
  width: 200px;
  position: relative;
}

[role="tooltip"] {
  position: absolute;
  opacity: 0;
  left: 100%;
  min-width: 90px;
  transform: translateX(-20px) scale(.85);
  transition: all 0.15s ease;
  padding: 10px;
  color: #333;
  border-radius: 10px;
  box-shadow: 2px 2px 1px silver;
}

.tooltip-wrapper:focus [role="tooltip"],
.tooltip-wrapper:hover [role="tooltip"] {
  opacity: 1;
  background: yellow;
  transform: translateX(0) scale(1);
}

[role="tooltip"].bottom {
  left: 50%;
  top: 100%;
  transform: translate(-50%, -20px) scale(.85);
}

.tooltip-wrapper:focus [role="tooltip"].bottom,
.tooltip-wrapper:hover [role="tooltip"].bottom {
  transform: translate(-50%, 0) scale(1);
}
<div class="tooltip-wrapper" tabindex="0">
  <div role="tooltip">
    <strong>Bold Title</strong>
    <p>short setence</p>
    <a href="#">a link!</a>
  </div>
  Div with HTML tooltip. Hover me to see the tooltip.
</div>

<div class="tooltip-wrapper" tabindex="0">
  <div role="tooltip" class="bottom">
    <strong>Bold Title</strong>
    <p>short setence</p>
    <a href="#">a link!</a>
  </div>
  Div with bottom HTML tooltip. Hover me to see the tooltip.
</div>

jsFiddle

0 голосов
/ 12 марта 2019

Используйте span внутри wrap DOM и покажите его onhover

.tooltip {
    position: absolute;
    opacity: 0;
    margin-left: 200px;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

.wrap:hover  .tooltip{
    opacity: 1;
    background: yellow;
    margin-top: 0px;
    margin-left: 220px;    
}


.wrap {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
    width: 200px;
}
<div class="wrap">
  <div class="tooltip">
    <h4>TITLE</h4>
    <p>short sentence </p>
    <a href="#">click me!</a>
  </div>
 Div with standard tooltip. Hover me to see the tooltip.
</div>
...