dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS ToolTips not working in WordPress

  1. #1
    Join Date
    Jun 2013
    Posts
    38

    CSS ToolTips not working in WordPress

    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.

    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.

    Is this a WordPress issue? Is it reading my code differently?

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    The first page I found CSS in your page for the tooltips. I don't see this in the beta site:

    <style>
    a .tooltip 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);
    }

    .tooltip {
    color: #000000;
    outline: none;
    text-decoration: none;
    position: relative;
    }
    .tooltip span {
    margin-left: -999em;
    position: absolute;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    }
    .tooltip: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;
    }

    .tooltip:hover img {
    border: 0;
    margin: 0px 0 0 -95px;
    float: left;
    position: absolute;
    width: 85px;
    height: 85px;
    }

    .tooltip:hover h2 {
    font-family: 'Vollkorn', serif;
    font-weight: bold;
    display: block;
    color: #373737;
    margin: 0.8125em 0;
    font-size: 24px;
    line-height: 0.1em;
    }
    .splashtips { padding: 0.8em 1em; }

    * html a:hover { background: transparent; }
    .splashtips {
    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: progidXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#938f8f',GradientType=0 ); /* IE6-9 */
    border: 1px solid #FFFFD1;
    }

    </style>

  3. #3
    Join Date
    Jun 2013
    Posts
    38
    Quote Originally Posted by cbVision View Post
    The first page I found CSS in your page for the tooltips. I don't see this in the beta site:
    Originally the CSS with in <style> tags because it wasn't working on the live site either. I placed all the CSS in style tags, in the php file itself, and it worked. With wordpress, it's not working either way.

    You won't see the css in style tags on wordpress, because I'm trying to optimize it for loading time and SEO. So, it's all in the stylesheets.

  4. #4
    Join Date
    Jun 2013
    Posts
    38
    Well, I figured this out.

    Wordpress was adding line breaks and <p> tags. I downloaded a plugin that disables that called RAW HTML, and checked the box telling it to not do that.

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles