Bootstrap/less/tooltip.less

//
// Tooltips
// --------------------------------------------------


// Base class
.tooltip {
  position: absolute;
  z-index: @zindex-tooltip;
  display: block;
  visibility: visible;
  font-size: @font-size-small;
  line-height: 1.4;
  .opacity(0);

  &.in     { .opacity(.9); }
  &.top    { margin-top:  -3px; padding: 5px 0; }
  &.right  { margin-left:  3px; padding: 0 5px; }
  &.bottom { margin-top:   3px; padding: 5px 0; }
  &.left   { margin-left: -3px; padding: 0 5px; }
}

// Wrapper for the tooltip content
.tooltip-inner {
  max-width: @tooltip-max-width;
  padding: 3px 8px;
  color: @tooltip-color;
  text-align: center;
  text-decoration: none;
  background-color: @tooltip-bg;
  border-radius: @border-radius-base;
}

// Arrows
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip {
  &.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.top-right .tooltip-arrow {
    bottom: 0;
    right: 5px;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }
  &.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }
  &.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
  &.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
  &.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}
standardize top level file comments 2012-06-28 21:46:45 -07:00			`//`
			`// Tooltips`
			`// --------------------------------------------------`

start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`// Base class`
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup 2012-01-11 21:42:55 -08:00			`.tooltip {`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`position: absolute;`
remove sprites vars, change zindex vars 2012-11-30 15:23:13 -08:00			`z-index: @zindex-tooltip;`
update property order and do some misc cleanup 2011-11-17 01:28:42 -08:00			`display: block;`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`visibility: visible;`
Bump tooltips to use `@font-size-small` (11px to 12px) 2013-07-17 23:55:58 -07:00			`font-size: @font-size-small;`
Add longer tooltip example to docs, tighten up line-height on tooltip; run make 2012-12-26 09:36:07 -06:00			`line-height: 1.4;`
merge in js from 1.4... start working through js docs 2011-11-20 20:58:04 -08:00			`.opacity(0);`
Merge branch '2.3.0-wip' into 3.0.0-wip Conflicts: docs/assets/css/bootstrap-responsive.css docs/assets/js/bootstrap-popover.js docs/assets/js/bootstrap.js docs/css.html docs/templates/pages/base-css.mustache js/bootstrap-popover.js less/mixins.less less/tooltip.less 2013-02-05 22:42:54 -08:00
Fixes #9145: Fix tooltip opacity Update tooltips to not use RGBa colors so IE8 can have tooltips, too (means we're now using `opacity`). 2013-08-06 11:18:53 -07:00			`&.in { .opacity(.9); }`
clean up styles 2013-02-05 22:29:59 -08:00			`&.top { margin-top: -3px; padding: 5px 0; }`
			`&.right { margin-left: 3px; padding: 0 5px; }`
			`&.bottom { margin-top: 3px; padding: 5px 0; }`
			`&.left { margin-left: -3px; padding: 0 5px; }`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`}`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00
			`// Wrapper for the tooltip content`
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup 2012-01-11 21:42:55 -08:00			`.tooltip-inner {`
move things around :) Moved pager, pagination, popovers, tooltip, progress bars & type properties to variables.less 2013-07-26 17:04:15 +05:00			`max-width: @tooltip-max-width;`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`padding: 3px 8px;`
popovers and tooltips vars 2012-11-30 15:40:44 -08:00			`color: @tooltip-color;`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`text-align: center;`
			`text-decoration: none;`
-background to -bg on tooltip and popover vars 2013-03-31 17:19:12 -07:00			`background-color: @tooltip-bg;`
more consistent variable naming patterns 2012-11-30 14:45:25 -08:00			`border-radius: @border-radius-base;`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`}`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00
			`// Arrows`
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup 2012-01-11 21:42:55 -08:00			`.tooltip-arrow {`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`position: absolute;`
			`width: 0;`
			`height: 0;`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`border-color: transparent;`
			`border-style: solid;`
			`}`
			`.tooltip {`
			`&.top .tooltip-arrow {`
			`bottom: 0;`
			`left: 50%;`
popovers and tooltips vars 2012-11-30 15:40:44 -08:00			`margin-left: -@tooltip-arrow-width;`
			`border-width: @tooltip-arrow-width @tooltip-arrow-width 0;`
			`border-top-color: @tooltip-arrow-color;`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`}`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-27 20:50:00 -07:00			`&.top-left .tooltip-arrow {`
			`bottom: 0;`
			`left: 5px;`
			`border-width: @tooltip-arrow-width @tooltip-arrow-width 0;`
			`border-top-color: @tooltip-arrow-color;`
			`}`
			`&.top-right .tooltip-arrow {`
			`bottom: 0;`
			`right: 5px;`
			`border-width: @tooltip-arrow-width @tooltip-arrow-width 0;`
			`border-top-color: @tooltip-arrow-color;`
			`}`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`&.right .tooltip-arrow {`
			`top: 50%;`
			`left: 0;`
popovers and tooltips vars 2012-11-30 15:40:44 -08:00			`margin-top: -@tooltip-arrow-width;`
			`border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;`
			`border-right-color: @tooltip-arrow-color;`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`}`
			`&.left .tooltip-arrow {`
			`top: 50%;`
			`right: 0;`
popovers and tooltips vars 2012-11-30 15:40:44 -08:00			`margin-top: -@tooltip-arrow-width;`
			`border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;`
			`border-left-color: @tooltip-arrow-color;`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`}`
			`&.bottom .tooltip-arrow {`
			`top: 0;`
			`left: 50%;`
popovers and tooltips vars 2012-11-30 15:40:44 -08:00			`margin-left: -@tooltip-arrow-width;`
			`border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;`
			`border-bottom-color: @tooltip-arrow-color;`
remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 2012-07-09 22:14:30 -07:00			`}`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-27 20:50:00 -07:00			`&.bottom-left .tooltip-arrow {`
			`top: 0;`
			`left: 5px;`
			`border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;`
			`border-bottom-color: @tooltip-arrow-color;`
			`}`
			`&.bottom-right .tooltip-arrow {`
			`top: 0;`
			`right: 5px;`
			`border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;`
			`border-bottom-color: @tooltip-arrow-color;`
			`}`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-16 23:58:36 -08:00			`}`