Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS ToolTips not working in WordPress
    primarykey
    data
    text
    <p>If you look at www.cleantelligent.com/tour, you will see active, working tooltips that are stylish and useful. They are purely CSS without any JS or jQuery.</p> <p>We have moved to a WordPress install and I am trying to copy and paste code from our live site to our beta.cleantelligent.com/tour So far, everything is great, until these tool tips. For some reason, the CSS is not being read across. </p> <p>Is this a WordPress issue? Is it reading my code differently?</p> <pre><code>/*TOUR LANDING PAGE*/ a .tooltiptour span{ color: #1982d1; text-decoration: none; transition-property: opacity; transition-duration: 1s; background: none repeat scroll 0% 0% rgb(159, 218, 238); border: 1px solid rgb(43, 176, 215); } .tooltiptour { color: #000000; outline: none; text-decoration: none; position: relative; } .tooltiptour span { margin-left: -999em; position: absolute; opacity: 0; transition: opacity .3s ease-in-out !important; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; } .tooltiptour:hover span { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); font-family: 'News Cycle', sans-serif; position: absolute; left: 4em; top: -1.9em; z-index: 99; margin-left: 0; width: 280px; opacity: 1; } .tooltiptour:hover img { border: 0; margin: 0px 0 0 -95px; float: left; position: absolute; width: 85px; height: 85px; } .tooltiptour:hover h2 { font-family: 'Vollkorn', serif; font-weight: bold; display: block; color: #373737; margin: 0.8125em 0; font-size: 24px; line-height: 0.1em; } .splashtipstour { padding: 0.8em 1em; } * html a:hover { background: transparent; } .splashtipstour { padding: 0.5em 0.8em 0.8em 2em; background: rgb(246,248,249); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,248,249,1) 44%, rgba(245,247,249,1) 52%, rgba(215,222,227,1) 70%, rgba(147,143,143,1) 98%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(44%,rgba(246,248,249,1)), color-stop(52%,rgba(245,247,249,1)), color-stop(70%,rgba(215,222,227,1)), color-stop(98%,rgba(147,143,143,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* IE10+ */ background: linear-gradient(to bottom, rgba(246,248,249,1) 44%,rgba(245,247,249,1) 52%,rgba(215,222,227,1) 70%,rgba(147,143,143,1) 98%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#938f8f',GradientType=0 ); /* IE6-9 */ border: 1px solid #FFFFD1; } /*END TOUR LANDING*/ </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload