WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Smarty Material Design

power of google material

EXPLORE COMPONENTS

MATERIAL COMPONENTS

MATERIAL : TOOLTIPS

The Material Design Lite (MDL) tooltip component is an enhanced version of the standard HTML tooltip as produced by the title attribute. A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. The MDL tooltip component is pre-styled (colors, fonts, and other settings are contained in material.min.css) to provide a vivid, attractive visual element that displays related but typically non-essential content, e.g., a definition, clarification, or brief instruction.

HOW TO ENABLE MATERIAL 
1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official
add
Follow
print
Print
Show Code 
<!-- Simple Tooltip -->
<div id="tt1" class="icon material-icons">add</div>
<div class="mdl-tooltip" data-mdl-for="tt1">
	Follow
</div>

<!-- Large Tooltip -->
<div id="tt2" class="icon material-icons">print</div>
<div class="mdl-tooltip mdl-tooltip--large" for="tt2">
	Print
</div>
cloud_upload
Upload file.zip
share
Share your content
via social media
Show Code 
<!-- Rich Tooltip -->
<div id="tt3" class="icon material-icons">cloud_upload</div>
<div class="mdl-tooltip" data-mdl-for="tt3">
	Upload <strong>file.zip</strong>
</div>

<!-- Multiline Tooltip -->
<div id="tt4" class="icon material-icons">share</div>
<div class="mdl-tooltip" for="tt4">
	Share your content<br>via social media
</div>

yes, hover me.

Markup Language

yes, hover me.

eMarkup Language
Show Code 
NOTE: HTML markup is supported!

<!-- A target with tooltip text in a larger font size -->
<p>yes,  <span id="xml"><span class="text-danger">hover me</span></span>.</p>
<span class="mdl-tooltip" for="xml">
	<img src="demo_files/images/smart-min.png" width="40" height="40"> Markup Language
</span>

<!-- A target with a tooltip containing both an image and text. -->
<p>yes,  <span id="xml2"><span class="text-danger">hover me</span></span>.</p>
<span class="mdl-tooltip mdl-tooltip--large" for="xml2">eMarkup Language</span>
MDL class Effect Remarks
mdl-tooltip Defines a container as an MDL tooltip Required on tooltip container element
mdl-tooltip--large Applies large-font effect Optional; goes on tooltip container element
mdl-tooltip--left Positions the tooltip to the left of the target Optional; goes on tooltip container element
mdl-tooltip--right Positions the tooltip to the right of the target Optional; goes on tooltip container element
mdl-tooltip--top Positions the tooltip to the top of the target Optional; goes on tooltip container element
mdl-tooltip--bottom Positions the tooltip to the bottom of the target Optional; goes on tooltip container element