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