Как сделать чистую CSS-подсказку?

-1

Я пытаюсь сделать чистую CSS-подсказку и сделал некоторые исследования, но не смог найти то, что искал, и если я сделаю все возможное, чтобы передать кому-то запутывающий код в мою. Я не возражаю, если jquery необходим для получения моего результата, но я бы скорее избегал его, если это было возможно! Я хотел бы знать, как разработать всплывающую подсказку, если это возможно. Вот элемент моего собственного кода, для которого мне нужна подсказка. Элементу, который мне нужен для подсказки инструмента, является div id `selectStateAlabama. Ниже приведена демонстрация jsfiddle.Как сделать чистую CSS-подсказку?

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

источник

2014-10-10 Kyle_Figueroa

Обеспечить рабочий jsfiddle. PHP-код и относительные URL-адреса (для js) не будут работать. –

Если вы заканчивали this modification to your fiddle, вы увидите, что я добавил дочерний элемент, а затем позиционируется это абсолютно без установки верхнего/левого (так, n, почти как position:relative;, но не содержится в его родительском элементе). Затем я добавил селектор :hover для родительского объекта, использовал атрибут CSS transition и вы получите всплывающую подсказку.

Добавленная CSS является

#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; 
}

И добавил HTML в этой строке:

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

Это должно заставить вас идти вместе на своем пути.

источник

2014-10-10 03:26:21

Редактировать код, как это ...

HTML является :::

<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>

В CSS вам нужно добавить эти две вещи ....

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; 
}

& Если вы хотите попробовать jQuery посмотреть на эту ссылку.

http://jqueryui.com/tooltip/

источник

2014-10-10 03:38:41

OP нуждался в чистом решении CSS. Это использует jQuery – JuLo

Привет, @JuLo, Это не jQuery. В HTML-коде я добавил только . Вопросы и ответы. И если вы удалите весь тег

Как сделать чистую CSS-подсказку?

ответ

Смежные вопросы