相关疑难解决方法(0)

我刚刚遇到了一个巧妙的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>

这会产生一个小箭头/三角形效果,一个"工具提示尾巴".这让我大吃一惊!我真的很想知道它是如何工作的？!

此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:

这是一个有趣的问题.这可以仅使用CSS来完成,暂时忽略阴影吗？

更新1

我想出了我最初问题的解决方案.这是小提琴......

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff …

我不知何故被这段代码困住了：

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

我想将其更改为纯 JavaScript。我不确定如何调用工具提示函数，我已经有了一些想法，例如：

var tooltips = document.querySelectorAll("[data-toggle='tooltip']");
for(var i = 0; i < tooltips.length; i++){
   //this gives an error
   tooltips[i].tooltip();
}

我可以获得所有工具提示，但无法初始化它们。如果我写这样的东西：

$(tooltips[i]).tooltip();

然后它就可以工作了，但我想删除 jQuery 依赖项，因为这是我拥有的唯一 jQuery 部分。任何想法？我一直在寻找，但找不到任何有用的东西。