Как добавить границы для всплывающих подсказок со стрелками?

0

У меня есть 4-направленные подсказки со стрелками как: после псевдоэлемента, например: (См. JSFiddle)

 <div class="background">
 <div class="tooltip tooltip-right">
     <i>i</i>
     <div><h4>Achtung!</h4>
         <p>Here is the info for section one</p></div> 
 </div>
.tooltip div {
    display:none;
    color:#000;
    border: 3px solid rgba(117, 175, 67, 0.4);
    background:#FFF;
    padding:15px;
    width: 250px;
    z-index: 99;
 }

.tooltip-right div {
    left: 180%;
    top: -80%;
}

.tooltip div:after {
    position:absolute;
    content: "";
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    bottom:-20px;
}

.tooltip-right div:after {
    left:-20px;
    top:20px;
    border-color: transparent #FFFFFF transparent transparent;;
} 

Я пытаюсь выяснить, как добавить границу к стрелке с помощью: перед псевдоэлементом, как здесь, здесь, но я не могу понять, как изменить направление стрелки для разных элементов. Может ли кто-нибудь помочь или предложить ссылку на демонстрацию многонаправленных подсказок со стрелками и границами?

Теги:
tooltip

1 ответ

2
Лучший ответ

Основной принцип заключается в том, что после того, как вы разместили стрелку границы, используя :after псевдоэлемента, вы помещаете другую, чуть меньшую стрелку сверху с помощью :before псевдоэлементом.

Укладка выполняется с использованием значения z-index.

Каждая стрелка требует позиционирования с абсолютными значениями (и некоторой отрицательной маркой) в зависимости от того, где она должна быть.

Для верхней стрелки с границей:

HTML

<div class="tooltip top">
  <p>Tooltip Text</p>
</div>

CSS

.tooltip {
  display:inline-block;
  vertical-align:top;
  height:50px;
  line-height:50px; /* as per div height */
  margin:25px;
  border:2px solid grey;
  width:250px;
  text-align:center;
  position:relative; /* positioning context */
}
.tooltip:before,
.tooltip:after { /*applies to all arrows */
  position:absolute;
  content:"";
}

.tooltip:after {
  /* the is going to be the extra border */
  border:12px solid transparent;
}

.tooltip:before {
 /* the is going to be the inside of the arrow */
  border:10px solid transparent; /* less than outside */ 
}

/* Lets do the top arrow first */

.top:after {
  /* positioning */
  left:50%;
  margin-left:-6px; /* 50% of border */
  top:-24px; /* 2x border */
  border-bottom-color:grey; /* as div border */
 }


.top:before {
  /* positioning */
  left:50%;
  margin-left:-5px; /* 50% of border */
  top:-20px; /* 2x border */
  border-bottom-color:white; /* as div background */
  z-index:5; /* put it on top */
}

Я завершил стрелки (TRBL) (с некоторыми небольшими комментариями) в прилагаемом...

ПРИМЕР КОДЕФА

  • 0
    Комментарии чрезвычайно полезны для выяснения того, что происходит, я очень ценю тщательность. Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню