You are here

Home » API reference » Form Tips 8

formtips.css in Form Tips 8 

.form-type-checkbox .formtips-wrapper {
  display: inline-block;
}

.formtip {
  display: inline-block;
  margin: 0 .3em;
  background-color: #ccc;
  border: 2px solid #ccc;
  color: #fff;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  line-height: 13px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  /* Needed for fieldset override. */
  letter-spacing: normal;

  box-sizing: content-box;
  vertical-align: baseline;
}

.formtip:focus,
.formtip:hover,
.formtip:active {
  background-color: #2369a6;
  border: 2px solid #2369a6;
  color: #fff;

  text-decoration: none;
  transition: all .25s ease-in-out;

  cursor: help;
}

.formtip::before {
  content: '?';
  color: #fff;
}

.formtips-processed:not(.formtips-show) {
  display: none;
  opacity: 0;
}

.formtips-processed.formtips-show {
  opacity: 1;
  display: block;
}

.formtips-processed {
  transition: opacity 0.25s ease-in-out;
  z-index: 100;
  display: none;
  text-align: left;
  padding: 20px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  /* font-size: 0.8em; */
  line-height: 1.4;
}

.formtips-processed ul.tips,
div.description.formtips-processed,
.form-item .description.formtips-processed,
.form-item__description.formtips-processed {
  color: #fff;
  margin: 0;
}

.formtips-processed.filter-guidelines,
div.description.formtips-processed,
.form-item .description.formtips-processed,
.form-item__description.formtips-processed {
  background-color: #1e2021;
}

.formtips-processed.filter-guidelines .filter-guidelines-item {
  margin: 0;
  color: #fff;
}

.filter-wrapper .form-item label {
  display: table;
}

/* The pointer of the tooltip. */
.formtips-processed::before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1e2021;
  left: 1.5em;
  top: -12px;
}

/* Ensure the wrapper doesn't cut off tip. */
.formtips-item {
  overflow: visible !important;
  position: relative;
}

/**
 * Workaround for Seven theme until
 * https://www.drupal.org/project/drupal/issues/3028675 is committed.
 */
.vertical-tabs {
  overflow: inherit !important;
}

File

css/formtips.css
View source 
  1. .form-type-checkbox .formtips-wrapper {

  2.   display: inline-block;

  3. }

  4. 

  5. .formtip {

  6.   display: inline-block;

  7.   margin: 0 .3em;

  8.   background-color: #ccc;

  9.   border: 2px solid #ccc;

  10.   color: #fff;

  11.   border-radius: 50%;

  12.   width: 13px;

  13.   height: 13px;

  14.   line-height: 13px;

  15.   font-size: 12px;

  16.   font-weight: bold;

  17.   text-decoration: none;

  18.   text-align: center;

  19.   /* Needed for fieldset override. */

  20.   letter-spacing: normal;

  21. 

  22.   box-sizing: content-box;

  23.   vertical-align: baseline;

  24. }

  25. 

  26. .formtip:focus,

  27. .formtip:hover,

  28. .formtip:active {

  29.   background-color: #2369a6;

  30.   border: 2px solid #2369a6;

  31.   color: #fff;

  32. 

  33.   text-decoration: none;

  34.   transition: all .25s ease-in-out;

  35. 

  36.   cursor: help;

  37. }

  38. 

  39. .formtip::before {

  40.   content: '?';

  41.   color: #fff;

  42. }

  43. 

  44. .formtips-processed:not(.formtips-show) {

  45.   display: none;

  46.   opacity: 0;

  47. }

  48. 

  49. .formtips-processed.formtips-show {

  50.   opacity: 1;

  51.   display: block;

  52. }

  53. 

  54. .formtips-processed {

  55.   transition: opacity 0.25s ease-in-out;

  56.   z-index: 100;

  57.   display: none;

  58.   text-align: left;

  59.   padding: 20px;

  60.   position: absolute;

  61.   border-radius: 3px;

  62.   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

  63.   /* font-size: 0.8em; */

  64.   line-height: 1.4;

  65. }

  66. 

  67. .formtips-processed ul.tips,

  68. div.description.formtips-processed,

  69. .form-item .description.formtips-processed,

  70. .form-item__description.formtips-processed {

  71.   color: #fff;

  72.   margin: 0;

  73. }

  74. 

  75. .formtips-processed.filter-guidelines,

  76. div.description.formtips-processed,

  77. .form-item .description.formtips-processed,

  78. .form-item__description.formtips-processed {

  79.   background-color: #1e2021;

  80. }

  81. 

  82. .formtips-processed.filter-guidelines .filter-guidelines-item {

  83.   margin: 0;

  84.   color: #fff;

  85. }

  86. 

  87. .filter-wrapper .form-item label {

  88.   display: table;

  89. }

  90. 

  91. /* The pointer of the tooltip. */

  92. .formtips-processed::before {

  93.   position: absolute;

  94.   content: '';

  95.   width: 0;

  96.   height: 0;

  97.   border: 6px solid transparent;

  98.   border-bottom-color: #1e2021;

  99.   left: 1.5em;

  100.   top: -12px;

  101. }

  102. 

  103. /* Ensure the wrapper doesn't cut off tip. */

  104. .formtips-item {

  105.   overflow: visible !important;

  106.   position: relative;

  107. }

  108. 

  109. /**

  110.  * Workaround for Seven theme until

  111.  * https://www.drupal.org/project/drupal/issues/3028675 is committed.

  112.  */

  113. .vertical-tabs {

  114.   overflow: inherit !important;

  115. }