<!-- Light package of effect.css It is optional if you want to use css3 animation effects --> <link rel="stylesheet" href="..path/css/addon/effect-light.min.css"> <!-- Latest compiled and minified CSS on head of your page --> <link rel="stylesheet" href="..path/css/titip.min.css">
Using data-title attribute
You can use titip classes with any element.
.titip-right
.titip-bottom
.titip-left
.titip-top
.titip-top-right
.titip-top-left
.titip-bottom-right
.titip-bottom-left
Using Sub Element
Instead of data-title="[your content]" attribute you can use a child element which have .titip-content class. By this way you can freely design your tooltip content.
.titip-right
Hello this is a content
you can use custom html,
etc. in content element
.titip-bottom
Warning!! You should not use
data-title="[]" and
.titip-content together.
.titip-left
AngularUI titip has
many placement options
this is titip-left
.titip-top
AngularUI titip has
many placement options
this is titip-top
.titip-top-right
Instead of data-title="[your content]"
attribute you can use a child element
which have .titip-content class.
By this way you can freely design your
tooltip content.
.titip-top-left
AngularUI titip has
many placement options
titip-top-left...
.titip-bottom-right
Instead of data-title="[your content]"
attribute you can use a child element
which have .titip-content class.
By this way you can freely design your
tooltip content.
.titip-bottom-left
AngularUI titip has
many placement options
titip-bottom-left...
.titip-active class
.titip-bottom .titip-active
Hello this is an active content
you can use custom html,
etc. in content element
.titip-top .titip-active
.titip-wrapped .titip-wrapped-large classes
.titip-wrapped wrap content 170px and .titip-wrapped-large wrap content 300px
.titip-wrapped
.titip-bottom-left
this is wrapped content inside titip-content. by default, text on attribute or titip-content white space has no-wrap.
wrapped size is 300px
Titip Content image
Alice Jarde
alice@alicejarde.net My name is Alice Jarde. I am from UK. I was born in London on 1982. I am a software developer worked on Angular...Lorem impus dolor....
Titip Themes Options
Titip themes based on Bootstrap buttons theme options. Ex. instead of btn-warning you should add titip-warning
titip-default
titip-default
DEFAULT THEME
This is titip content element.
titip-default thick-border
DEFAULT THEME
This is titip content element.
thick border...
Titip Animation Options
Titip animations based on effect.css keyframes dictionary.
There are 12 keyframe effects which we implemented for titip. If you have already have effect-light-css You don't need include it again.
titip-flip-x
titip-flip-x
Fade Effect
This is titip content element.
titip-flip-x thick-border
Fade Effect
This is titip content element.
thick border...
For more examples and detailed information please visit below links