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(@tooltip-opacity); }
  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
}

// 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: @tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.top-right .tooltip-arrow {
    bottom: 0;
    right: @tooltip-arrow-width;
    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: @tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
  &.bottom-right .tooltip-arrow {
    top: 0;
    right: @tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}
standardize top level file comments 2012-06-29 06:46:45 +02:00			`//`
			`// Tooltips`
			`// --------------------------------------------------`

start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 08:58:36 +01: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-10 07:14:30 +02:00			`// Base class`
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup 2012-01-12 06:42:55 +01:00			`.tooltip {`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 08:58:36 +01:00			`position: absolute;`
remove sprites vars, change zindex vars 2012-12-01 00:23:13 +01:00			`z-index: @zindex-tooltip;`
update property order and do some misc cleanup 2011-11-17 10:28:42 +01:00			`display: block;`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 08:58:36 +01:00			`visibility: visible;`
Bump tooltips to use `@font-size-small` (11px to 12px) 2013-07-18 08:55:58 +02:00			`font-size: @font-size-small;`
Add longer tooltip example to docs, tighten up line-height on tooltip; run make 2012-12-26 16:36:07 +01:00			`line-height: 1.4;`
merge in js from 1.4... start working through js docs 2011-11-21 05:58:04 +01: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-06 07:42:54 +01:00
Fixes #11555: Add `@tooltip-opacity` variable 2013-12-15 06:43:08 +01:00			`&.in { .opacity(@tooltip-opacity); }`
Fixed hardcoded tooltip arrow positioning Tooltip Arrow positioning was hardcoded to 5px instead of using @tooltip-arrow-width. 2013-09-11 15:47:13 +02:00			`&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }`
			`&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }`
			`&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }`
			`&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 08:58:36 +01: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-10 07:14:30 +02:00
			`// Wrapper for the tooltip content`
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup 2012-01-12 06:42:55 +01:00			`.tooltip-inner {`
move things around :) Moved pager, pagination, popovers, tooltip, progress bars & type properties to variables.less 2013-07-26 14:04:15 +02: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-17 08:58:36 +01:00			`padding: 3px 8px;`
popovers and tooltips vars 2012-12-01 00:40:44 +01:00			`color: @tooltip-color;`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 08:58:36 +01:00			`text-align: center;`
			`text-decoration: none;`
-background to -bg on tooltip and popover vars 2013-04-01 02:19:12 +02:00			`background-color: @tooltip-bg;`
more consistent variable naming patterns 2012-11-30 23:45:25 +01: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-17 08:58:36 +01: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-10 07:14:30 +02:00
			`// Arrows`
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup 2012-01-12 06:42:55 +01:00			`.tooltip-arrow {`
start breaking down patterns.less into more distinct files, update docs for forms to use correct classes 2011-11-17 08:58:36 +01: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-10 07:14:30 +02:00			`border-color: transparent;`
			`border-style: solid;`
			`}`
			`.tooltip {`
			`&.top .tooltip-arrow {`
			`bottom: 0;`
			`left: 50%;`
popovers and tooltips vars 2012-12-01 00:40:44 +01: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-10 07:14:30 +02:00			`}`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-28 05:50:00 +02:00			`&.top-left .tooltip-arrow {`
			`bottom: 0;`
Fixed hardcoded tooltip arrow positioning Tooltip Arrow positioning was hardcoded to 5px instead of using @tooltip-arrow-width. 2013-09-11 15:47:13 +02:00			`left: @tooltip-arrow-width;`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-28 05:50:00 +02:00			`border-width: @tooltip-arrow-width @tooltip-arrow-width 0;`
			`border-top-color: @tooltip-arrow-color;`
			`}`
			`&.top-right .tooltip-arrow {`
			`bottom: 0;`
Fixed hardcoded tooltip arrow positioning Tooltip Arrow positioning was hardcoded to 5px instead of using @tooltip-arrow-width. 2013-09-11 15:47:13 +02:00			`right: @tooltip-arrow-width;`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-28 05:50:00 +02:00			`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-10 07:14:30 +02:00			`&.right .tooltip-arrow {`
			`top: 50%;`
			`left: 0;`
popovers and tooltips vars 2012-12-01 00:40:44 +01: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-10 07:14:30 +02:00			`}`
			`&.left .tooltip-arrow {`
			`top: 50%;`
			`right: 0;`
popovers and tooltips vars 2012-12-01 00:40:44 +01: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-10 07:14:30 +02:00			`}`
			`&.bottom .tooltip-arrow {`
			`top: 0;`
			`left: 50%;`
popovers and tooltips vars 2012-12-01 00:40:44 +01: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-10 07:14:30 +02:00			`}`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-28 05:50:00 +02:00			`&.bottom-left .tooltip-arrow {`
			`top: 0;`
Fixed hardcoded tooltip arrow positioning Tooltip Arrow positioning was hardcoded to 5px instead of using @tooltip-arrow-width. 2013-09-11 15:47:13 +02:00			`left: @tooltip-arrow-width;`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-28 05:50:00 +02:00			`border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;`
			`border-bottom-color: @tooltip-arrow-color;`
			`}`
			`&.bottom-right .tooltip-arrow {`
			`top: 0;`
Fixed hardcoded tooltip arrow positioning Tooltip Arrow positioning was hardcoded to 5px instead of using @tooltip-arrow-width. 2013-09-11 15:47:13 +02:00			`right: @tooltip-arrow-width;`
fixes #7961 a bit: adds css for extra tooltip placement options. /cc @fat you just need dat js prolly 2013-06-28 05:50:00 +02:00			`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-17 08:58:36 +01:00			`}`