将自定义 bootstrap 工具提示气球与轮廓对齐

Question

在我的项目中，我覆盖了 Bootstrap 样式以制作自定义工具提示气球。

我的css是这样的

/*overriding bootstrap*/
.tooltip-inner {
    border: 1px solid #0ad;
    background: #FFFFFF;
    font: 12px Arial;
    color: #494949;
    line-height: 18px;
    max-width: 200px;
    padding: 12px;
    text-align: left;
    border-radius: 1px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
.tooltip-arrow,
.tooltip-arrow:after {
 border-width:7px!important;
    display: block;
    border-color: transparent;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
 content: "";
}
.tooltip.top>.tooltip-arrow,.tooltip.top>.tooltip-arrow:after {
 border-bottom-width:0!important;
    border-top-color: #0ad;
    bottom: -2px;
    margin-left: -7px;
}
.tooltip.top>.tooltip-arrow:after {
 border-top-color: #fff;
 bottom: 1.5px;
}
.tooltip.right>.tooltip-arrow,.tooltip.right>.tooltip-arrow:after {
 border-left-width:0!important;
    border-right-color: #0ad;
    left: -2px;
    margin-top: -7px;
 top:22px;/*overriding*/
}
.tooltip.right>.tooltip-arrow:after {
 border-right-color: #fff;
 left: 1.5px;
 top:0;
}
.tooltip.left>.tooltip-arrow,.tooltip.left>.tooltip-arrow:after {
 border-right-width:0!important;
    border-left-color: #0ad;
    right: -2px;
    margin-top: -7px;
 top:22px;/*overriding*/
}
.tooltip.left>.tooltip-arrow:after {
 border-left-color: #fff;
 right: 1.5px; 
 top:0;
}
.tooltip.bottom>.tooltip-arrow,.tooltip.bottom>.tooltip-arrow:after {
 border-top-width:0!important;
    border-bottom-color: #0ad;
    top: -2px;
    margin-left: -7px;
}
.tooltip.bottom>.tooltip-arrow:after {
 border-bottom-color: #fff;
 top: 1.5px;
}

我的工具提示气球：this is how it looks

由于箭头不在中间，我很难将箭头与 (i) 符号对齐，因为气球的高度会随着文本内容的长度而变化。谁能帮我这个？谢谢。

Answer 1

你可以试试这个：

<p><code>.toolbar-right</code> <a href="#" class="tooltip-right" data-tooltip="I’m the tooltip text.">Tooltip</a></p>

DEMO HERE

或

<body>  <br /> <br /> <br /><br />


<p align="center">Hi, <a href="#" bubbletooltip="Hi I am a bubble tooltip">This is a demo </a></p>

</body>

DEMO HERE

或

<a class="tooltips" href="#">CSS Tooltips
<span>Tooltip</span></a>

DEMO HERE

Answer 2

谢谢大家，我找到了解决方法。

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

@import"http://getbootstrap.com/dist/css/bootstrap.css";
 
.lw {
    font-size: 60px;
}
.image {
    align-self: center;
    margin-top: 100px;
    margin: 100px;
}
/*overriding bootstrap*/
 .tooltip {
    box-shadow: none;
    z-index: 6000;
}
.tooltip.left, .tooltip.right {
  /*this makes the deference*/
    margin-top: -80px;
    top: 50%!important;
}
.tooltip.top, .tooltip.bottom {
    margin-left: 0px;/*just incase*/
}
.tooltip.top {
    margin-top: -15px;
    padding-top: 0;
}
.tooltip.bottom {
    padding-bottom: 0
}
.tooltip.left {
    margin-left: -15px;
    padding-left: 0
}
.tooltip.right {
    padding-right: 0
}
.tooltip-inner {
    border: 1px solid #0ad;
    background: #FFFFFF;
    font: 12px Arial;
    color: #494949;
    line-height: 18px;
    max-width: 200px;
    padding: 12px;
    border-radius: 1px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    width: 200px
}
.left>.tooltip-inner, .right>.tooltip-inner {
    text-align: left;
}
.tooltip-arrow, .tooltip-arrow:after {
    border-width:7px!important;
    display: block;
    border-color: transparent;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
    content:"";
}
.tooltip.top>.tooltip-arrow, .tooltip.top>.tooltip-arrow:after {
    border-bottom-width:0!important;
    border-top-color: #0ad;
    bottom: -2px;
    margin-left: -7px;
}
.tooltip.top>.tooltip-arrow:after {
    border-top-color: #fff;
    bottom: 1.5px;
}
.tooltip.right>.tooltip-arrow, .tooltip.right>.tooltip-arrow:after {
    border-left-width:0!important;
    border-right-color: #0ad;
    left: -2px;
    margin-top: -7px;
    top:22px;
    /*offset*/
}
.tooltip.right>.tooltip-arrow:after {
    border-right-color: #fff;
    left: 1.5px;
    top:0;
}
.tooltip.left>.tooltip-arrow, .tooltip.left>.tooltip-arrow:after {
    border-right-width:0!important;
    border-left-color: #0ad;
    right: -2px;
    margin-top: -7px;
    top:22px;
    /*offset*/
}
.tooltip.left>.tooltip-arrow:after {
    border-left-color: #fff;
    right: 1.5px;
    top:0;
}
.tooltip.bottom>.tooltip-arrow, .tooltip.bottom>.tooltip-arrow:after {
    border-top-width:0!important;
    border-bottom-color: #0ad;
    top: -2px;
    margin-left: -7px;
}
.tooltip.bottom>.tooltip-arrow:after {
    border-bottom-color: #fff;
    top: 1.5px;
}

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
  <br/><br/><br/><br/><div> 
<span data-original-title="Information about internet contract length" data-placement="right" data-toggle="tooltip" class="image"><a href="#">Tooltip</a></span>
  </div>
 

<!-- End your code here -->
</body>
</html>

将自定义 bootstrap 工具提示气球与轮廓对齐

aligning customized bootstrap Tool tip balloon with just outline

html

css

twitter-bootstrap

twitter-bootstrap-tooltip