Skip to content

Commit

Permalink
remove popoverarrows mixin, relegate code to tooltips and popvers sin…
Browse files Browse the repository at this point in the history 
…ce we only used them once each; this fixes the problem of broken tooltips in 2.1
  • Loading branch information
@mdo
mdo committed Jul 10, 2012
1 parent f4877c2 commit 64e87a8
Show file tree
Hide file tree
Showing 8 changed files with 261 additions and 249 deletions.
249 changes: 100 additions & 149 deletions docs/assets/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4603,91 +4603,19 @@ input[type="submit"].btn.btn-mini {
}

.tooltip.top {
margin-top: -2px;
margin-top: -3px;
}

.tooltip.right {
margin-left: 2px;
margin-left: 3px;
}

.tooltip.bottom {
margin-top: 2px;
margin-top: 3px;
}

.tooltip.left {
margin-left: -2px;
}

.tooltip.top .tooltip-arrow {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid #cccccc;
border-top: 10px solid rgba(0, 0, 0, 0.2);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

.tooltip.top .tooltip-arrow:after {
bottom: 1px;
left: -9px;
border-top: 9px solid #ffffff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}

.tooltip.left .tooltip-arrow {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #cccccc;
border-left: 10px solid rgba(0, 0, 0, 0.2);
}

.tooltip.left .tooltip-arrow:after {
right: 1px;
bottom: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ffffff;
}

.tooltip.bottom .tooltip-arrow {
top: -10px;
left: 50%;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #cccccc;
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
border-left: 10px solid transparent;
}

.tooltip.bottom .tooltip-arrow:after {
top: 1px;
left: -9px;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
border-left: 9px solid transparent;
}

.tooltip.right .tooltip-arrow {
top: 50%;
left: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid #cccccc;
border-right: 10px solid rgba(0, 0, 0, 0.2);
border-bottom: 10px solid transparent;
}

.tooltip.right .tooltip-arrow:after {
bottom: -9px;
left: 1px;
border-top: 9px solid transparent;
border-right: 9px solid #ffffff;
border-bottom: 9px solid transparent;
margin-left: -3px;
}

.tooltip-inner {
Expand All @@ -4706,6 +4634,40 @@ input[type="submit"].btn.btn-mini {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top-color: #000000;
border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-right-color: #000000;
border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-left-color: #000000;
border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000;
border-width: 0 5px 5px;
}

.popover {
Expand Down Expand Up @@ -4745,113 +4707,102 @@ input[type="submit"].btn.btn-mini {
margin-right: 10px;
}

.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
border-bottom: 1px solid #dcdcdc;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.popover-content {
padding: 9px 14px;
}

.popover-content p,
.popover-content ul,
.popover-content ol {
margin-bottom: 0;
}

.popover .arrow,
.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

.popover .arrow:after {
z-index: -1;
content: "";
}

.popover.top .arrow {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid #cccccc;
border-top: 10px solid rgba(0, 0, 0, 0.2);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top-color: #ffffff;
border-width: 10px 10px 0;
}

.popover.top .arrow:after {
bottom: 1px;
left: -9px;
border-top: 9px solid #ffffff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
bottom: -1px;
left: -11px;
border-top-color: rgba(0, 0, 0, 0.2);
border-width: 11px 11px 0;
}

.popover.right .arrow {
top: 50%;
left: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid #cccccc;
border-right: 10px solid rgba(0, 0, 0, 0.2);
border-bottom: 10px solid transparent;
border-right-color: #ffffff;
border-width: 10px 10px 10px 0;
}

.popover.right .arrow:after {
bottom: -9px;
left: 1px;
border-top: 9px solid transparent;
border-right: 9px solid #ffffff;
border-bottom: 9px solid transparent;
bottom: -11px;
left: -1px;
border-right-color: rgba(0, 0, 0, 0.2);
border-width: 11px 11px 11px 0;
}

.popover.bottom .arrow {
top: -10px;
left: 50%;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #cccccc;
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
border-left: 10px solid transparent;
border-bottom-color: #f5f5f5;
border-width: 0 10px 10px;
}

.popover.bottom .arrow:after {
top: 1px;
left: -9px;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
border-left: 9px solid transparent;
top: -1px;
left: -11px;
border-bottom-color: rgba(0, 0, 0, 0.2);
border-width: 0 11px 11px;
}

.popover.left .arrow {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #cccccc;
border-left: 10px solid rgba(0, 0, 0, 0.2);
border-left-color: #ffffff;
border-width: 10px 0 10px 10px;
}

.popover.left .arrow:after {
right: 1px;
bottom: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ffffff;
}

.popover .arrow {
position: absolute;
width: 0;
height: 0;
}

.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
content: "";
}

.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

.popover-content {
padding: 9px 14px;
}

.popover-content p,
.popover-content ul,
.popover-content ol {
margin-bottom: 0;
right: -1px;
bottom: -11px;
border-left-color: rgba(0, 0, 0, 0.2);
border-width: 11px 0 11px 11px;
}

.thumbnails {
Expand Down
11 changes: 11 additions & 0 deletions docs/assets/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -598,6 +598,17 @@ form.bs-docs-example {
line-height: 18px;
}

/* Tooltips */
.bs-docs-tooltip-examples {
text-align: center;
margin: 0 0 10px;
list-style: none;
}
.bs-docs-tooltip-examples li {
display: inline;
padding: 0 10px;
}

/* Popovers */
.bs-docs-example-popover {
padding-bottom: 24px;
Expand Down
12 changes: 11 additions & 1 deletion docs/javascript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -753,10 +753,20 @@ <h2>Examples</h2>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
<p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>

<h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>


<hr class="bs-docs-separator">

Expand Down
12 changes: 11 additions & 1 deletion docs/templates/pages/javascript.mustache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -685,10 +685,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
<div class="bs-docs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
</p>
</div>{{! /example }}

<h3>{{_i}}Four directions{{/i}}</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>{{! /example }}


<hr class="bs-docs-separator">

Expand Down
Loading

0 comments on commit 64e87a8

Please sign in to comment.