Custom Tooltip Style
This sample shows how to change the tooltip style.
Hover Me
Hover Me
$(function(){$('#pp1').tooltip({ position: 'right', content: 'This is the tooltip message.', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); $('#pp2').tooltip({ position: 'bottom', content:...
Using Jeasyui to Make tooltips
Basic Tooltip
Hover the links to display tooltip message.
The tooltip can use each elements title attribute.
Hover me to display tooltip.
Tooltip Position
Click the drop-down list below to change where the tooltip appears.
Select position:
Bottom
Top
Left
Right
Hover Me
function...
Spoiler with CSS and Javascript
#layer1 { visibility : visible; position : relative; } #layer2 { visibility : hidden; position : absolute; }
a.info { position:relative; z-index:24; background-color:#ddd; color:#000; text-decoration:none } a.info:hover {z-index:25; background-color:#ff0} a.info span{display: none} a.info:hover span { display:block; position:absolute; top:2em; left:2em; width:10em; border:1px solid #0cf; background-color:#555;...
Spoiler Pure Css
input.trigger { display:inline-block; margin:0px; padding:0px; } .spoiler { background-color:white; padding:15px 30px; margin:10px 0px 0px; display:none; } input.trigger:checked + .spoiler { display:block; }
Here's some reference for you to make article that you use hide and show some text.
Very Easy..
Demo
Buka/Tutup
SpoilerLorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed...
Blockquotes Examples Level Quotes
Take a look another example found share by this page is a good approach to make blockquote for your text.
.bq2 { width: 450px; overflow: hidden; border: 1px solid #dde5ed; background: #f8fafd; color: #758fa3; }.bq2 .source { display: block; width: 100%; margin-bottom: 5px; font-weight: bold; font-size: 13px; text-shadow: 0px 1px 0px #f8fafb; padding: 6px 11px; background: #eaeff5; border-top: 1px...
Blockquote Float in Paragraph text, Examples
.left-pull { display: block; padding: 7px 11px; margin-left: 5px; width: 170px; float: left; margin-right: 10px; background: #555; color: #bcbcbc; font-weight: bold; line-height: 17px; font-size: 15px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }.left-pull p { font-style: italic; color: #d5d5d5; } .left-pull .ref { font-size: 11px; }
<style> .left-pull { display:...
Blockquote Style Examples (3)
blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*Borders - (Optional)*/ border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px...
Blockquote tag Examples (2)
blockquote { font-family: Georgia,serif; font-size: 15px; font-style: italic; margin: 0.25em 0; padding: 15px 20px 15px 50px; border: dashed 1px #ccc; line-height: 1.45; color: #666; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTRvePtZPnzzhXqhkoSa6-eHf2_IPmvXy-L8w9q2yhc5ia2VSwljTKrTxNusfIKHA4BEqKA2CP6tdiTgpFMq2ui57lUgq9qrUhb66FkhUDHvQh5M-1qyenlmLGA0NwzqR45FVLQvKFVQ/s1600/bg-blockquote.gif)...
Blockquote Tag Example Style (1)
blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote p { display: inline; }
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em...
Subscribe to:
Posts (Atom)