Using Jeasyui to Create Tooltips (2)

Custom Tooltip Style

This sample shows how to change the tooltip style.

Hover Me

the code of this page showing below

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <h2>Custom Tooltip Style</h2>
    <p>This sample shows how to change the tooltip style.</p>
    <div style="margin:s0px 0;"></div>
    <div style="padding:10px 200px">
        <div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <div style="padding:10px 200px">
        <div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script> $(function(){$('#pp1').tooltip({ position: 'right', content: '<span style="color:#fff">This is the tooltip message.</span>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); $('#pp2').tooltip({ position: 'bottom', content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#fff000', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' }); }, onPosition: function(){ $(this).tooltip('tip').css('left', $(this).offset().left); $(this).tooltip('arrow').css('left', 20); } }); }); </script>

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:

so, this source code of this page showing below

 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <h2>Basic Tooltip</h2>
    <p>Hover the links to display tooltip message.</p>
    <div style="margin:20px 0;"></div>
    <p>The tooltip can use each elements title attribute.
    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.
    </p>

    <h2>Tooltip Position</h2>
    <p>Click the drop-down list below to change where the tooltip appears.</p>
    <div style="margin:20px 0;"></div>
    <span>Select position:</span>
    <select onchange="changePosition(this.value)">
        <option value="bottom">Bottom</option>
        <option value="top">Top</option>
        <option value="left">Left</option>
        <option value="right">Right</option>
    </select>
    <div style="padding:10px 200px">
    <div id="pp" class="easyui-panel easyui-tooltip" title="This is the tooltip message." style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script type="text/javascript">
        function changePosition(pos){
            $('#pp').tooltip({
                position: pos
            });
        }
    </script>

Spoiler with CSS and Javascript

here some tip, that i've been trying this trick form this page

Choose the web language that you have learned : This is the choice

XHTML
CSS
PHP
Back To

the css and javascript here :

<style>
#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; color:#fff; } </style>
<script> function afficher() { document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative'; document.getElementById('layer3').style.visibility='hidden';}function fermer() { document.getElementById('layer2').style.visibility ='hidden'; document.getElementById('layer2').style.position ='absolute'; document.getElementById('layer3').style.visibility='visible'; } </script>

Spoiler Pure Css

Here's some reference for you to make article that you use hide and show some text.
Very Easy..

Demo
Buka/Tutup Spoiler

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

the css :

<style> 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; } </style>

Blockquotes Examples Level Quotes

Take a look another example found share by this page is a good approach to make blockquote for your text. the style code

 <style>.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 solid #f4f7fa; border-bottom: 1px solid #dde5ed; }.bq2 p { line-height: 19px; margin-bottom: 10px; font-style: italic; padding-left: 15px; } .bq1 { padding-left: 16px; border-left: 5px solid #577da4; width: 700px; } .bq1 p { font-style: italic; font-size: 14px; line-height: 18px; color: #8c8785; } p.after { margin-left: 40px; font-weight: bold; } p.after a { color: #6793d4; text-decoration: none; } p.after a:hover { text-decoration: underline; }</style>

Block-Level Quote

-GOB, "Arrested Development"
Well, I will tell you this, Michael. I don't have a son. But if I ever do, I'm either going to take him to the cabin in the woods, or I'm going to promise to take him and then not take him. But the one thing that I will never do is not tell him that I'm taking him to a cabin in the woods, and then not take him!

Every glorious revolution has its dark side, as for CSS is every web browser like IE7 does not support the same effect defined by CSS, so often designer has to squeeze their mind to figure out a trick, hack or fix, that’s when CSS Editor comes in to help.

- Linked Articles

Blockquote Float in Paragraph text, Examples

 <style> .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>

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

"Here we have another pull-quote floated to the side. Except now we can give a source."
- Jake Rocheleau

Inspiring Code source

Blockquote Style Examples (3)

 <style>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 15px #ccc; box-shadow: 2px 2px 15px #ccc; }blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; }blockquote::after{ /*Reset to make sure*/ content: ""; }blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; }blockquote a:hover{ color: #666; }blockquote em{ font-style: italic; }</style> 
 <blockquote>

Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac habitasse platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla convallis magna nunc, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.

i just copied in this page source

Blockquote tag Examples (2)

here another examples blockquote tag and the result

 <style> 
 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) no-repeat 15px 18px; 
 clear: both; 
 }</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

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;
}

example :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru

read it the commenter here : https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/