@charset "utf-8"; /* CSS Document for tooltips , Copyright Heritage Virtual Airlines Trademarked 2002 all rights reserved This is Freeware and has been adapted for the Older version of PHPVMS version; 5.5.xx NOT the Beta release of "7" This must be applied to your layout.php file in the area. NOT the ///////// /////////// */ /* Jim Lyman Web Master , support@heritageairlines.com */ /* //////////start first tooltip, see docs for info but follow in order with See below documentation in here ///////// */ /* DO NOT USE between these lines I've marked, use tip1,tip2,tip3 or tip4 only ////////// */ /* mark ////<-------------------------------------------------------------------------------------> //// */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 260px; background-color: black; color: #fff; text-align: center; padding:12px; border-radius: 6px; /* padding: 5px 0; */ position: absolute; z-index: 1; top: -5px; left: 110%; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } /* mark ////<-------------------------------------------------------------------------------------> //// */ /*Start the actual usage here only ///////////////////*/ .tooltip1 { position: relative; display: inline-block; cursor:pointer; /*border-bottom: 1px dotted black; */ } .tooltip1 .tooltiptext1 { visibility: hidden; width: 260px; background-color: black; color: #fff; text-align: center; padding:12px; cursor:pointer; box-shadow: 8px 8px 12px 0px rgba(160,26,35,0.9); border-radius: 6px; /* padding: 5px 0; */ position: absolute; z-index: 1; top: -5px; right: 110%; /* Fade in tooltip - takes 4 seconds to go from 0% to 100% opacity: */ opacity: 0; transition: opacity 1s; } .tooltip1 .tooltiptext1::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip1:hover .tooltiptext1 { visibility: visible; opacity: 1; /* Must be here for fade in transition or it won't work */ } .tooltip2 { position: relative; display: inline-block; cursor:pointer; /* border-bottom: 1px dotted black; */ } .tooltip2 .tooltiptext2 { visibility: hidden; width: 260px; background-color: black; color: #fff; text-align: center; padding:12px; cursor:pointer; box-shadow: 8px 8px 12px 0px rgba(160,26,35,0.9); border-radius: 6px; /* padding: 5px 0; */ position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; /* Fade in tooltip - takes 4 seconds to go from 0% to 100% opacity: */ opacity: 0; transition: opacity 4s; } .tooltip2 .tooltiptext2::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip2:hover .tooltiptext2 { visibility: visible; opacity: 1; /* Must be here for fade in transition or it won't work */ } .tooltip3 { position: relative; display: inline-block; cursor:pointer; /* border-bottom: 1px dotted black; */ } .tooltip3 .tooltiptext3 { visibility: hidden; width: 260px; background-color: black; color: #fff; text-align: center; padding:12px; box-shadow: 8px 8px 12px 0px rgba(160,26,35,0.9); border-radius: 6px; /* padding: 5px 0; */ position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; /* Fade in tooltip - takes 4 seconds to go from 0% to 100% opacity: */ opacity: 0; transition: opacity 4s; } .tooltip3 .tooltiptext3::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip3:hover .tooltiptext3 { visibility: visible; opacity: 1; /* Must be here for fade in transition or it won't work */ } .tooltip4 { position: relative; display: inline-block; cursor:pointer; /* border-bottom: 1px dotted black; */ } .tooltip4 .tooltiptext4 { visibility: hidden; width: 260px; background-color: black; color: #fff; text-align: center; padding:12px; box-shadow: 8px 8px 12px 0px rgba(160,26,35,0.9); border-radius: 6px; /* padding: 5px 0; */ position: absolute; z-index: 1; top: -5px; left: 110%; /* Fade in tooltip - takes 4 seconds to go from 0% to 100% opacity: */ opacity: 0; transition: opacity 4s; } .tooltip4 .tooltiptext4::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip4:hover .tooltiptext4 { visibility: visible; opacity: 1; /* Must be here for fade in transition or it won't work */ } /* /////////////////////////// Documentation for HTML and / or PHP scripting in your pages /////////////////////////////////////////////// */ /* If using XHTML use this; Home page/ My Pages much different with the

then here. If using any Bootstrap use this ;

myscript

Here is the actual examples; Example 1 - must be inserted in page, I recommend using the

tag , see next example.

Testing

Hover over me Tooltip text

Example 2 -

scripts

can be inserted anywhere

Testing

Hover over me Tooltip text

NOTE::::::: All named tooltips above scripting must be named in your div tags.......... fyi, tooltip2, or tooltip3 etc........ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */