如何在跨度或div中添加提示以創建聊天氣泡？

Question

我試圖在氣泡上添加一個三角形的小尖端。

 $('.check').on('blur', function() { $(this).prev('div.tooltip-inner').remove(); if (!isValidEmailAddress($(this).val())) { var position = $(this).position(), validationdiv = $('<div></div>') .addClass('tooltip-inner') .text('Invalid Email') .css({ left: position.left, width: $(this).outerWidth() }) .insertBefore($(this)); validationdiv.css({ top: position.top - validationdiv.height(), display: 'block' }); $(this).focus(); } }); function isValidEmailAddress(emailAddress) { var pattern = new RegExp(/^((([az]|\\d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+(\\.([az]|\\d|[!#\\$%&'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\ -\퟿\豈-\﷏\ﷰ-\￯])+)*)|((\\x22)((((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f]|\\x21|[\\x23-\\x5b]|[\\x5d-\\x7e]|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(\\\\([\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f]|[\ -\퟿\豈-\﷏\ﷰ-\￯]))))*(((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(\\x22)))@((([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ-\￯])*([az]|\\d|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.)+(([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])|(([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])([az]|\\d|-|\\.|_|~|[\ -\퟿\豈-\﷏\ﷰ-\￯])*([az]|[\ -\퟿\豈-\﷏\ﷰ-\￯])))\\.?$/i); return pattern.test(emailAddress); }; 

 .tooltip-inner { opacity: 0.8; bottom: 30px; left: 10%; margin-left: 0px; margin-bottom: -6px; margin-top: -5px; position: absolute; width: 140px; color: #FFFFFF; background: #FF3B3B; height: 30px; line-height: 30px; text-align: center; visibility: visible; border-radius: 6px; } span { position: relative; } span:after { position: absolute; display: block; content: “”; border-color: #eee transparent transparent transparent; border-style: solid; border-width: 10px; height: 0; width: 0; position: absolute; bottom: -19px; left: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <br /> <br /> <br /> <br /> <br /> <br /> <input type="text" class="check" /> 

Answer 1

我用這個：cssarrowplease.com真的很好。

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #88b7d5;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}

Answer 2

像這樣嘗試：

JS：

$('.check').on('blur', function() {

  if (!isValidEmailAddress($(this).val())) {
      showTooltip($(this), 'Invalid Email');
  }

});

function showTooltip(obj, msg) {
  obj.prev('div.tooltip-inner').remove();
  var position = obj.position(),
      validationdiv = $('<div></div>')
      .addClass('tooltip-inner')
      .text(msg)
      .append($('<span></span>'))
      .css({
        left: position.left,
        width: obj.outerWidth()
      })
      .insertBefore(obj);
    validationdiv.css({
      top: position.top - validationdiv.height() - 5,
      display: 'block'
    }).find('span').css({
      left: validationdiv.width() / 2 - 4
    });
    obj.focus();
}

function isValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  return pattern.test(emailAddress);
};

CSS：

.tooltip-inner {
  opacity: 0.8;
  bottom: 30px;
  left: 10%;
  margin-left: 0px;
  margin-bottom: -6px;
  margin-top: -5px;
  position: absolute;
  width: 140px;
  color: #FFFFFF;
  background: #FF3B3B;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: visible;
  border-radius: 6px;
}
.tooltip-inner span {
    position: relative;
    display: block;
    content: “”;
    border-color: #FF3B3B transparent transparent transparent;
    border-style: solid;
    border-width: 5px;
    width: 0;
    bottom: 0;
}

演示