You may be trying to access this site from a secured browser on the server. Please enable scripts and reload this page.
Turn on more accessible mode
Turn off more accessible mode
Skip Ribbon Commands
Skip to main content
Turn off Animations
Turn on Animations
Sign In
Home
Demos
Intranet Collection1
Together
Lets Move
Focus
Play
Inspired
Sport
Bold
News
Intranet Collection2
Intranet Layout 1
Intranet Layout 2
Intranet Layout 3
Intranet Layout 4
Intranet Layout 5
Intranet Layout 6
Intranet Layout 7
Intranet Layout 8
Intranet Collection3
Intranet Layout 9
Intranet Layout 10
Intranet Layout 11
Intranet Layout 12
Intranet Layout 13
Custom Collection
Custom Layout 1
Custom Layout 2
Custom Layout 3
Custom Layout 4
Footer
Footer Templates
Footer Guide
Microsoft Teams Kit
Social
Knowledge Base
Team Stuff
Announcements
Teams Basic
Teams Advanced
Company Policy
Remote Work
High School
Primary School
School Contacts
Accessibility
Footer
Accessibility Statement
Themes
Theme 1
Theme 2
Theme 3
Theme 4
Theme 5
Theme 6
Branded Sites
Branded Site 1
Branded Site 2
Branded Site 3
Branded Site 4
Branded Site 5
Branded Site 6
Branded Site 7
Branded Site 8
Branded Site 9
Use Cases
Social
Social 1
Social 2
Social 3
Airlines
Airlines 1
Airlines 2
Airlines 3
Education
Education 1
Education 2
Education 3
Education 4
Education 5
Education 6
Education 7
Real Estate
Real Estate 1
Real Estate 2
Real Estate 3
Real Estate 4
Technology
Technology 1
Technology 2
Technology 3
Technology 4
Travel
Travel 1
Travel 2
Travel 3
Travel 4
Retail
Retail 1
Retail 2
Retail 3
Retail 4
Legal
Legal 1
Legal 2
Legal 3
Legal 4
Healthcare
Healthcare 1
Healthcare 2
Healthcare 3
Healthcare 4
Healthcare 5
Sport
Sport 1
Sport 2
Sport 3
Basics
Abbreviation
Button
Divider
Link
Popover
Table
Tooltip
Layout
Accordion
Alert
Info
Note
Panel
Row
Section
Tabs
Toggle
Well
Lists
Date List
File List
Icon List
Image List
Simple List
Media
Background
Before and After
Frame
Image
Image Caption
Image Carousel
Image Titles
Slideshow
Textshow
Vimeo Video
YouTube Video
Misc
Animate
Code
Countdown
Counter Boxes
Events
Icon
Map
Tickers
Tiles
TOC Content
TOC Navigation
Typography
Blockquote
Dropcap
Emphasis
Label
Lead
List
Small
Text
Social
Facebook
Instagram
LinkedIn
Twitter
Yammer
Office 365
PowerApps
Power BI
Teams
Tooltip
It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.
Home
Recent
Currently selected
Employee List
ShortPointOnlineAssets
Employees2
News
Site Contents
Page Content
[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F61570236e6eba51b643ea0c6_tooltip.svg" title="Tooltip" description="Provide%20users%20with%20helpful%20hints%20about%20your%20content%20with%20the%20Tooltip%20Design%20Element.%20Give%20valuable%20information%20about%20specific%20content%20on%20your%20page%20in%20a%20subtle%20manner." /]
Tooltip Examples
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
[tooltip title="Top%20positioned%20tooltip"]Tooltip (Top)[/tooltip]
tempus velit eget quam tempor, et pretium augue tristique. Mauris sit amet
[tooltip left title="Left%20positioned%20tooltip"]Tooltip (Left)[/tooltip]
odio id leo ultrices bibendum. Pellentesque hendrerit, turpis a commodo hendrerit, nunc eros cursus nibh, vitae hendrerit eros
[tooltip right title="Right%20positioned%20tooltip"]Tooltip (Right)[/tooltip]
metus id elit. Donec lobortis arcu sit amet lacus sollicitudin, vel dictum augue feugiat.
[tooltip bottom title="Bottom%20positioned%20tooltip"]Tooltip (Bottom)[/tooltip]
Sed sapien lacus, convallis ac pellentesque eu, luctus commodo leo. Vestibulum consequat erat vitae ante suscipit, nec porta urna feugiat. In hac habitasse platea dictumst.
[/column]
[/row]
[/section-item]
[/section]
Tooltip Options Demos
Different Positions
[divider style="double-dotted" /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[tooltip title="Title"]Top positioned tooltip[/tooltip]
[tooltip left title="Title"]Left positioned tooltip[/tooltip]
[tooltip right title="Title"]Right positioned tooltip[/tooltip]
[tooltip bottom title="Title"]Bottom positioned tooltip[/tooltip]
[/column]
[/row]
[/section-item]
[/section]
[sp-demo-doc]
Title
– required! Text in the tooltip
Tooltip content
– content that shows in the tooltip
Placement
– place where you will see the tooltip appearance:
Default – by default tooltip will appear on the top
Left – tooltip will appear on the left side
Right – tooltip will appear on the right side
Bottom – tooltip will appear on the bottom
[/sp-demo-doc]