There are no notes for this item.
<!-- Default -->
<div class="form">
<label for="name" class="input-box__label">Label of box</label>
<input type="text" name="name" value="Value" class="input-box input-box--default">
<p class="form__hint print-fine">Hint text</p>
<span class="tooltip tooltip--contextual tooltip--error tooltip-- tooltip--">
<span class="tooltip__error"></span>
</span>
<button type="button" class="contextual-menu contextual-menu--default">
<span class="icon__info"></span>
<span class="tooltip tooltip--large tooltip--contextual tooltip--top">
Information about the item of the left of the icon
</span>
</button>
<script>
var triggerContextual = document.getElementsByClassName("contextual-menu");
var triggerContextualOne = triggerContextual[0];
var triggerContextualTwo = triggerContextual[1];
var triggerContextualThree = triggerContextual[2];
var triggerContextualFour = triggerContextual[3];
triggerContextualOne.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualTwo.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualThree.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualFour.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
</script>
</div>
<!-- Selected -->
<div class="form">
<label for="name" class="input-box__label">Label of box</label>
<input type="text" name="name" value="Value" class="input-box input-box--default">
<p class="form__hint print-fine">Hint text</p>
<span class="tooltip tooltip--contextual tooltip--error tooltip-- tooltip--">
<span class="tooltip__error"></span>
</span>
<button type="button" class="contextual-menu contextual-menu--active">
<span class="icon__info"></span>
<span class="tooltip tooltip--large tooltip--contextual tooltip--top">
Information about the item of the left of the icon
</span>
</button>
<script>
var triggerContextual = document.getElementsByClassName("contextual-menu");
var triggerContextualOne = triggerContextual[0];
var triggerContextualTwo = triggerContextual[1];
var triggerContextualThree = triggerContextual[2];
var triggerContextualFour = triggerContextual[3];
triggerContextualOne.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualTwo.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualThree.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualFour.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
</script>
</div>
<!-- Error -->
<div class="form">
<label for="name" class="input-box__label">Label of box</label>
<input type="text" name="name" value="Value" class="input-box input-box--error">
<p class="form__hint print-fine">Hint text</p>
<span class="tooltip tooltip--contextual tooltip--error tooltip--large tooltip--top">
<span class="tooltip__error"></span> ERROR message
</span>
<button type="button" class="contextual-menu contextual-menu--default">
<span class="icon__info"></span>
<span class="tooltip tooltip--large tooltip--contextual tooltip--top">
Information about the item of the left of the icon
</span>
</button>
<script>
var triggerContextual = document.getElementsByClassName("contextual-menu");
var triggerContextualOne = triggerContextual[0];
var triggerContextualTwo = triggerContextual[1];
var triggerContextualThree = triggerContextual[2];
var triggerContextualFour = triggerContextual[3];
triggerContextualOne.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualTwo.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualThree.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualFour.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
</script>
</div>
<!-- Error Selected -->
<div class="form">
<label for="name" class="input-box__label">Label of box</label>
<input type="text" name="name" value="Value" class="input-box input-box--error" checked>
<p class="form__hint print-fine">Hint text</p>
<span class="tooltip tooltip--contextual tooltip--error tooltip--large tooltip--top">
<span class="tooltip__error"></span> ERROR message
</span>
<button type="button" class="contextual-menu contextual-menu--default">
<span class="icon__info"></span>
<span class="tooltip tooltip--large tooltip--contextual tooltip--bottom">
Information about the item of the left of the icon
</span>
</button>
<script>
var triggerContextual = document.getElementsByClassName("contextual-menu");
var triggerContextualOne = triggerContextual[0];
var triggerContextualTwo = triggerContextual[1];
var triggerContextualThree = triggerContextual[2];
var triggerContextualFour = triggerContextual[3];
triggerContextualOne.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualTwo.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualThree.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
triggerContextualFour.onclick = function() {
this.classList.toggle("contextual-menu--active");
};
</script>
</div>
/*------------------------------------*\
#FORM ELEMENT
\*------------------------------------*/
// Check Inputbox CSS
// Check Tooltip CSS
// Check Contextual Menu CSS
// Check Messagging Inline CSS
.form {
position: relative;
float: left;
}
.form__hint {
position: absolute;
color: inherit;
margin: -10px 5px 0;
}
.input-box--error:focus ~ .tooltip--error,
.input-box--error[checked] ~ .tooltip--error {
display: block;
position: absolute;
bottom: 75%;
left: 80%;
}
.input-box--error:focus ~ .contextual-menu .tooltip,
.input-box--error[checked] ~ .contextual-menu .tooltip {
bottom: inherit;
top: 25px;
}
.input-box--error:focus ~ .contextual-menu .tooltip:before,
.input-box--error[checked] ~ .contextual-menu .tooltip:before {
border-width: 0 6px 8px 6px;
border-color: transparent transparent $border-tooltip;
bottom: inherit;
top: -8px;
}
.input-box--error:focus ~ .contextual-menu .tooltip:after,
.input-box--error[checked] ~ .contextual-menu .tooltip:after {
border-width: 0 5px 7px 5px;
border-color: transparent transparent $border-tooltip-inner;
bottom: inherit;
top: -7px;
}