DisplayName Dialog

by Christian Mueller

HTML

<div>
  DisplayName: 
  <span class="example2 displaynameHover" data-tool-tip="Das ist mein Tooltip!">
    <span class="inputbox" contenteditable="true" id="edit_input_fake">Hans Wurst</span>
    <span class="trailing">External</span>
  </span>
</div>

CSS

.displaynameHover:before { 
  content: "";
  position: absolute;
  right: 700px;
  margin-top: 4px;
  opacity: 0.85;
  width: 0; height: 0;
  border-bottom: 8px solid #ffcb66;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  display:none;
  -webkit-transition: all 0.4s ease;
  -moz-transition   : all 0.4s ease;
  transition   : all 0.4s ease;
}

.displaynameHover:after {
    content: attr(data-tool-tip);
    position: absolute;
    right: 400px;
    width: 400px;
    background: #ffcb66;
    padding: 5px 5px;
    color: black;
    margin-top: 12px;
    opacity: 0.85;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    border-radius        : 5px;
    white-space: wrap;
    display:none;
    -webkit-transition: all 0.4s ease;
    -moz-transition   : all 0.4s ease;
    transition   : all 0.4s ease;
    font-size: 14px;

}

.displaynameHover:hover:after, .displaynameHover:hover:before {
    display:block;
}

span.inputbox {
    width: auto;
    outline: none;
}

span.trailing {
    color: black;
    background-color: lightgrey;
    -moz-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
    padding:1px;
}

span.trailing-color {
    color: white;
    background-color: blue;
    transition: all 0.5s ease;
    padding:3px;
}

.example2 {
  border: 2px solid darkgrey;
  padding:3px;
}

JavaScript

var oldValue = $("#displayName").val();
$("input").keyup(function() {
    if(this.value.indexOf('External') == -1) {
        this.value = oldValue;
    } else {
    	oldValue = $("#displayName").val();
    }
});

$('div').on('click', function () {
    $('#edit_input_fake').focus();
});

$('.example2').on('mouseover', function() {
	$('span.trailing').addClass('trailing-color');
}).on('mouseout', function() {
  $('span.trailing').removeClass('trailing-color');
});