Bootstrap/less/tooltip.less

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


// Base class
.tooltip {
  position: absolute;
  z-index: @zindex-tooltip;
  display: block;
  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  // So reset our font and text properties to avoid inheriting weird values.
  .reset-text();
  font-size: @font-size-small;

  .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;
  background-color: @tooltip-bg;
  border-radius: @border-radius-base;
}

// Arrows
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.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;
    right: @tooltip-arrow-width;
    margin-bottom: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &.top-right .tooltip-arrow {
    bottom: 0;
    left: @tooltip-arrow-width;
    margin-bottom: -@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;
    right: @tooltip-arrow-width;
    margin-top: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
  &.bottom-right .tooltip-arrow {
    top: 0;
    left: @tooltip-arrow-width;
    margin-top: -@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;`
Reset text/font properties more thoroughly for tooltips+popovers; fixes #15925 [skip sauce] 2015-03-16 22:48:49 +01:00			`// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.`
			`// So reset our font and text properties to avoid inheriting weird values.`
			`.reset-text();`
Bump tooltips to use `@font-size-small` (11px to 12px) 2013-07-18 08:55:58 +02:00			`font-size: @font-size-small;`
Reset text/font properties more thoroughly for tooltips+popovers; fixes #15925 [skip sauce] 2015-03-16 22:48:49 +01:00
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;`
-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;`
			`}`
Deprecate diagonal tooltip classes 2014-11-05 00:09:56 +01:00			`// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1`
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			`.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;`
Fix #14936: Use correct left/right and margin on tooltip arrows 2014-10-30 16:33:14 +01:00			`right: @tooltip-arrow-width;`
			`margin-bottom: -@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;`
Fix #14936: Use correct left/right and margin on tooltip arrows 2014-10-30 16:33:14 +01:00			`left: @tooltip-arrow-width;`
			`margin-bottom: -@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;`
Fix #14936: Use correct left/right and margin on tooltip arrows 2014-10-30 16:33:14 +01:00			`right: @tooltip-arrow-width;`
			`margin-top: -@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;`
Fix #14936: Use correct left/right and margin on tooltip arrows 2014-10-30 16:33:14 +01:00			`left: @tooltip-arrow-width;`
			`margin-top: -@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			`}`