Как создать "подсказку хвоста" с помощью чистого CSS?

Я просто наткнулся на аккуратный трюк CSS. Посмотрите скрипку...

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

Ответы

Ответ 1

Вот пример с тэгом box-shadow, все браузеры последней версии должны поддерживать этот

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}


body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

Ответ 2

Вот объяснение, чтобы ответить на ваш первый вопрос (я оставлю фактический CSS другим, поскольку я ленив - пожалуйста, поддержите их ответы, которые, по вашему мнению, заслуживают голосов!):

Это создает небольшой эффект стрелки/треугольника, "хвост подсказки". Это дует мой разум! Мне очень интересно узнать, как это работает?!

  • При визуализации границы с различными цветами ребер, но с тем же стилем (в вашем случае solid), шов, разделяющий каждую пару соседних углов, является диагональной линией. Это очень похоже на то, что диаграмма здесь изображает стили границы groove, ridge, inset и outset.

    Обратите внимание, что, хотя все браузеры ведут себя одинаково и делали это так долго, насколько я помню, это поведение не полностью определено ни в спецификации CSS2.1, ни в модуле CSS Backgrounds and Borders. У последнего есть раздел, описывающий переходы цвета и стиля в углах, и, как представляется, это описание подразумевает, что для границ с нулевыми угловыми радиусами линия, которая на самом деле это линия, которая соединяет угол края набивки с краем края границы (что приводит к 45-градусной угловой линии для границ равной ширины), но спецификация все еще предупреждает, что это может быть не всегда так (тем более, что он даже не учитывает границы с нулевыми угловыми радиусами). 1

  • В контент (исходная модель W3C) область 40x40 создается из 20-пиксельных границ, а размеры контента определяются как 0x0.

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

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

    border-color: #ffffff #a0c7ff #ffffff #ffffff;

В результате это с отмеченными границами и границами границ, добавленными с помощью моего надежного инструмента линии:

Переориентация хвоста подсказки - это просто вопрос переключения цвета всплывающей подсказки. Например, это даст хвост, прикрепленный к нижней части наконечника:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

Предварительный просмотр jsFiddle

1 Если вы приверженец соответствия стандартам, вы можете также рассмотреть все это взломать.

Ответ 3

Я использую эту подсказку только с одним элементом div.

HTML:

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

CSS

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

Демо

Пояснение:

У меня есть нормальный div с рамкой, как и в случае с другим примером. Хвост - это простая комбинация CSS:

  • Я использую псевдоселектор: before (: after работает отлично тоже)
  • Я заставляю контент с пробелом, чтобы сделать хвост видимым.
  • Я поворачиваю свой ящик с 45deg, чтобы зафиксировать угол в боковой части всплывающей подсказки
  • Не удивительно, что размер и позиционирование.
  • Я добавляю границу на две стороны, которые мне нужны.
  • И, наконец, я добавляю тени к внешней границе.

Ответ 4

Всплывающая подсказка без тени

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

Ответ 5

подход Crossbrowser:

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

Ответ 6

Вы можете использовать: before и: after псевдоэлементы CSS. FOr:: перед этим можно использовать вставку треугольника и: после вставки прямоугольника. Комбинация этих двух создает подсказку для пузырьков

Например:

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

Онлайн-инструмент доступен на http://www.careerbless.com/services/css/csstooltipcreator.php