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

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

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

HTML:

 
 
i can haz css tooltip
 
 
 
  

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; } 

 
 
i can haz css tooltip
 
 
 
  

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

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

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

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

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

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

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

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

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

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

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

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

¹ _{Если вы приверженец соблюдения стандартов, вы можете также рассмотреть все это взломать.}

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

HTML:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula. 

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); } тем .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, чтобы зафиксировать угол в боковой части всплывающей подсказки
• Не удивительно, что размер и позиционирование.
• Я добавляю границу с двух сторон, которые я хочу.
• И, наконец, я добавляю тени к внешней границе.

Подсказка без тени

 .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; } 

 
How do I get this effect with only CSS? 
 
 
 
 
 
 
 
  

Подход 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); } направо .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); } 

 
  Tooltip text that wants to be your friend.  

Вы можете использовать: before и: после псевдоэлементов 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; } тем 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; } того, как 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