Cssポップアップアラートボタンで、代わりにテキストを入力

Question

どのように私はこのようにポップアップアラートのようにcssをカスタマイズするのですか？

iは、テキストボックス

<div class="form-group"> 
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label> 
    <div class="col-sm-5"> 
     <input type="email" class="form-control" id="judul_laporan" > 
    <span style="color: red" id="warnlaporan"></span> 
    </div> 
</div> 

<button type="button" id="save_laporan"></button> 

jQueryの

$("#save_laporan").click(function(){  
    var judul_laporan = $('input[name="judul_laporan"]'); 
    if(judul_laporan.val() == ''){ 
    judul_laporan.parent().parent().addClass('has-error'); 
    $('#warnlaporan').text("Judul Laporan Belum Ada"); 
    judul_laporan.focus(); 
    result 
    }else{ 
    judul_laporan.parent().parent().removeClass('has-error'); 
    $('#warnlaporan').text(""); 
    } 

の検証のこの種を使用していしかし、私は（ポップアップアラートが画像を好きなようにする方法を知らない、それはすべきあなたはx3schools'マニュアルを参照してくださいすることができます

Answer 1

）ボタンも。これは、divの上部にサンプルのポップアップを表示します。

このコードでは、ポップアップを開きます。あなたはまた、microtipを使用することができます

// When the user clicks on <div>, open the popup 
 
function myFunction() { 
 
    var popup = document.getElementById("myPopup"); 
 
    popup.classList.toggle("show"); 
 
}

/* Popup container */ 
 
.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
/* The actual popup (appears on top) */ 
 
.popup .popuptext { 
 
    visibility: hidden; 
 
    width: 160px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 

 
/* Popup arrow */ 
 
.popup .popuptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
/* Toggle this class when clicking on the popup container (hide and show the popup) */ 
 
.popup .show { 
 
    visibility: visible; 
 
    -webkit-animation: fadeIn 1s; 
 
    animation: fadeIn 1s 
 
} 
 

 
/* Add animation (fade in the popup) */ 
 
@-webkit-keyframes fadeIn { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
} 
 

 
@keyframes fadeIn { 
 
    from {opacity: 0;} 
 
    to {opacity:1 ;} 
 
}

<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me! 
 
    <span class="popuptext" id="myPopup">Popup text...</span> 
 
</div>

---

、それはかなりのライブラリ魔女はあなたに簡単にポップアップを作成する機会を与えています。唯一の宣言は<button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">です。しかし、rpmを使ってパッケージをダウンロードする必要があります（わずか1kb）。