Spoiler di Postingan

by Hm Ba

HTML

<body>  
  <div class='post-body'>
    <h2 class='post-title'>روي حكاية قديمة ان امرأة فقيرة كانت تحمل ابنها، مرّت في طريقها بالقرب من كهف، وفجأة سمعت صوتا آتيا من اغوار الكهف، يقول لها: ادخلي، وخذي كل ما ترغبين ولكن لا تنسي الأساس والجوهر. تذكري شيئا واحدا: لا يمكن تصحيح النسيان، فبعد خروجك من الكهف سيغلق الباب الى ابد الابدين. انتهزي الفرصة ولكن خذي حذرك من عدم نسيان ما هو اساس لك. وما ان دخلت حتى بهرتها الوان الجواهر ولمعان الذهب، فوضعت ابنها جانبا وبدأت بلقط الذهب والجوهر، وراحت تملأ جيوبها وصدرها بالذهب. كانت مذهولة ، راحت تحلم بالمستقبل اللامع الذي ينتظرها. عاد الصوت ليقول لها: بقي لك ثماني ثوان ، لا تنسي الأساس.
وما ان سمعت ان الثواني على وشك ان تمضي وتغلق الباب حتى هرعت بأقصى سرعة الى خارج الكهف. وبينما كانت تتأمّل ما حصلت عليه، تذكرت انها نسيت ابنها في داخل الكهف، وان باب الكهف سيبقى مغلقا على ولدها واحزانها التي لن تمحوها جواهرها وما حملت من ذهب.</h2>
<div class="help-tip">
    <p>.هذا مثال يوضح ما تعرضه هذه الإضافة، في حين يمكنك إستعمالها بموقعك لعمل ملاحظة لشيء ما.</p>
</div>

     <h3><a href='http://www.ar1web.com/2015/02/css-tooltips.html' target="_blank"> عودة لتدوينة</a></h3>
    </div> 
     
</body>

CSS

body {
    background: #2B2C38;
    font-size: 16px;
    color: #444;
    background-attachment: fixed;
}

h3 {
font-size: 16px;
font-weight: 400;
font-family:ge_dinar_tworegular;
text-align: center;
padding: 6px;
    position: relative;
margin: 15px auto;
background: #F25050;
border-bottom: 2px solid #DA4444;
border-radius: 3px 3px 5px 5px;
color: #fff;
width: 120px;
transition: all 0.5s ease-in-out;
}
h3 a {
color: #FFF;
text-decoration: none;
}
h3:hover {
 background: #DA4444; transition: all 0.5s ease-in-out;  color: #A31D1D;
}

.post-body h2 {
    color: #746D6C;
    text-align: center;
    font-family:droid arabic kufi;
    font-weight: bold;
    font-size: 12px;
    margin-top: 30px;

}

.post-body {
    max-width: 680px;
    margin: 20px auto;
    border: 10px solid #252630;
    padding: 15px 20px;
    background-color: #343541;
    color: #444;
}

.post-body img {
    max-width: 100%;
    height: auto;
}

.post-body iframe, iframe {
    max-width: 100%;
    margin: 0 auto;
}


.help-tip{
    position: absolute;
    top: 40px;
    right: 600px;
    text-align: center;
    background-color: #D55050;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{	/* The tooltip */
    display: none;
    text-align: right;
    font-family: droid arabic kufi;
    background-color: rgba(30, 32, 33, 0.97);
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px...