creating 10 tooltips

by Joe Saad

HTML

<!-- 
.tip$@0*10>.heading(>h4{this is my tip$})+.content(>p{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere saepe praesentium impedit aut animi provident at distinctio doloribus voluptates nihil voluptas maxime delectus rem ducimus similique sint incidunt. Placeat quisquam.})+.handle(>button{Save}+a{Cancel})
-->

<div class="tip tip0">
    <div class="heading">
        <h4>this is my tip1</h4>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere saepe praesentium impedit aut animi provident at distinctio doloribus voluptates nihil voluptas maxime delectus rem ducimus similique sint incidunt. Placeat quisquam.</p>
    </div>
    <div class="handle"><button>Save</button><a href="">Cancel</a></div>
</div>
<div class="tip tip1">
    <div class="heading">
        <h4>this is my tip2</h4>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere saepe praesentium impedit aut animi provident at distinctio doloribus voluptates nihil voluptas maxime delectus rem ducimus similique sint incidunt. Placeat quisquam.</p>
    </div>
    <div class="handle"><button>Save</button><a href="">Cancel</a></div>
</div>
<div class="tip tip2">
    <div class="heading">
        <h4>this is my tip3</h4>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere saepe praesentium impedit aut animi provident at distinctio doloribus voluptates nihil voluptas maxime delectus rem ducimus similique sint incidunt. Placeat quisquam.</p>
    </div>
    <div class="handle"><button>Save</button><a href="">Cancel</a></div>
</div>
<div class="tip tip3">
    <div class="heading">
        <h4>this is my tip4</h4>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere saepe praesentium impedit aut animi provident at distinctio doloribus voluptates nihil voluptas...

CSS

.tip {width: 100%; border:2px solid #000033; background-color: sienna; margin: 10px 0;}