CODEWITHSUNDEEP
jqueryhtmlcss
Kyle_Figueroa
Kyle_Figueroa

Reputation: 319

How to make a pure CSS tooltip?

I am trying to make a pure CSS tooltip and did some research but couldn't find exactly what im looking for and if I do its hard to transfer someones confusing code into my own. I don't mind if jquery is needed to get my result but i would much rather avoid it if possible! I would like to know how to design the tooltip to match my scheme if possible. Here is an element of my own code that i would like a tooltip for. The element I need to the tool tip for is the div id `chooseStateAlabama. There is a jsfiddle demo below also.

HTML

<body>
<div class="container">
<?php include ("_includes/sidemenu.php");?>
<div id="contentContainer">
    <div id="chooseStateRowOne">
        <div id="chooseStateAlabama"><p>AL</p></div>
    </div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="_javaScript/sidemenu.js"></script>
</body>

CSS

body {
    height: 100%;
    width:100%;
    overflow:hidden;
}
.container{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-9999;
}
#contentContainer {
    width: 100%;
    height: 100%;
    background:#ffffff;
    top: 5%;
    position: absolute;
    float:left;
    bottom: 30px;
    z-index: -9999;
    background-size:100% 100%;
    overflow:hidden;
}
p {
    margin:auto;
}
p:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
#chooseStateRowOne {
    width: 98%;
    height:16.6%;
    left: 0;
    top:2%;
    position: absolute;
    margin-left: 1%;
    margin-right: 1%;
}
#chooseStateAlabama {
    width: 9.1%;
    height: 100%;
    top: 0;
    left: 0;
    background:#383d3f;
    position: absolute;
    background-size:100% 100%;
    display: flex;
    color: #ffffff;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 2.5VW;
    text-align: center;
    vertical-align: middle;
}
#chooseStateAlabama:hover {
    background: #fbc500;
    cursor:pointer;
}

DEMO

JSFIDDLE

Upvotes: 0

Views: 618

Answers (2)

bud-e
bud-e

Reputation: 1551

Edit your code like this...

HTML is :::

<body>
  <div class="container">
    <?php include ("_includes/sidemenu.php");?>
    <div id="contentContainer">
      <div id="chooseStateRowOne">
        <div id="chooseStateAlabama" class="tooltip"><p>AL</p>      
          <span>ToolTip</span>
        </div>
      </div>
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="_javaScript/sidemenu.js"></script>
</body>

In CSS you need to add this two things....

div.tooltip span {
    display:none; padding:14px 20px;
    margin-top:1px; margin-left:5px;
    line-height:16px;
}
div.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;
}

& If you want to try jQuery look at this link.

http://jqueryui.com/tooltip/

Upvotes: 1

user1932079
user1932079

Reputation:

If you check out this modification to your fiddle, you'll see that I have added a child element and then positioned it absolutely w/o setting the top/left (so, then, almost like position:relative;, but not contained within its parent). Then I added a :hover selector for the parent object, employed the transition CSS attribute and you get a tooltip.

The added CSS is

#chooseStateRowOne>div>.help {
    position: absolute;
    border-radius: 4px;
    width: 0px;
    background: #fff;
    overflow: hidden;
    -webkit-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}
#chooseStateRowOne>div>.help>div {
    width: 512px;
    font-size: 14px;
    line-height: 1.4em;
    color:#000;
    text-align:left;
}
#chooseStateRowOne:hover>div>.help {
    padding:.5em;
    border-radius:4px;
    box-shadow:0px 0px 2px #999;
    width:512px;
}

And the added HTML is in this line:

<div id="chooseStateAlabama"><p>AL</p><div class="help"><div>Alabama</div></div></div>

That should get you going along on your own path.

Upvotes: 0

Related Questions