登录 | 注册 | FAQ
Anonymous

Problem with CSS in effect Tooltip

+ 发表回复

4 篇帖子 分页: 1 / 1


Problem with CSS in effect Tooltip

Bruno Bezerra » 周三 3月 25, 2015 2:47 pm

Hello everybody!

I made this topic in order to solve a question on the style of a Tooltip effect. A few months ago, I discovered how much this effect is important for websites and blogs, as well as being very dynamic, replace the tags '' abbr '' / acronym for a good free way.

I did the effect, but had problems when testing it. I realized that when I put it in a static page, the box appears even without touching the mouse, it may be a problem with the CSS code.

Picture of the effect:

图片

Now, I will send the CSS code, and then the HTML.

CSS:

代码: 全选
<style>
.tooltip {
    display: inline-block;
    height: 17px;
    border-bottom: 1px dotted #133783;
    cursor: help;
}
.tooltip a.word {
    font-weight: normal;
    color: #133783;
}
.tooltip:hover {
    color: #133783;
    border: none;
    height: auto;
}
#tooltip {
    position: absolute;
    margin-left: -20px;
    padding: 30px 10px 10px;
    z-index: 999;
}
#tooltip .container {
    border: 1px solid #133783;
    background-color: #E3E3E3;
    font-size: 13px !important;
    text-align: left !important;
    max-width: 300px;
    padding: 8px;
    display: block;
    cursor: auto;
}

#tooltip .container .label {
    color: #133783;
    text-transform: uppercase;
    font-family: Arial;
    font-size: 11px !important;
}

#tooltip .footer {
    cursor: auto;
    height: 16px;
    background-color: #133783;
    padding: 11px 45px 11px 11px;
    text-align: right;
    display: block;
    background-position: 285px -694px;
    background-repeat: no-repeat;
}

#tooltip .arrow {
    display: block;
    position: absolute;
    width: 26px;
    height: 13px;
    background-position: -41px -666px;
    margin: -21px 0 0 10px;
}

#tooltip .footer a {
    font-weight: normal !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    text-transform: uppercase;
}
</style>


HTML:

代码: 全选
<span class="tooltip" rel="i393"><span id="tooltip"><span class="container"><span class="arrow spr8"></span><span class="label">HTML</span>: HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages.</span><span class="footer spr8"></span></span>HTML</span>


To enhance the real reason to do this topic; I wonder how can I hide this Tooltip box by CSS?
头像

Bruno Bezerra

  • 帖子: 16
  • 注册: 周三 3月 26, 2014 8:31 pm
  • 地址: Brasil.

Re: Problem with CSS in effect Tooltip

nanoverso » 周四 3月 26, 2015 12:53 am

Essa questão é mais adequada para o fórum em língua inglesa.
头像

nanoverso

  • 帖子: 253
  • 注册: 周六 5月 10, 2014 12:08 am
  • 地址: Brazil
--
Free VST Plugins Download.

Re: Problem with CSS in effect Tooltip

Bruno Bezerra » 周四 3月 26, 2015 11:34 am

nanoverso 写道:Essa questão é mais adequada para o fórum em língua inglesa.


nanoverso, agradeço por ter avisado! Já entrei em contato com o Andreas explicando o fato ocorrido, e pedi a remoção do tópico. Irei repostar o tópico na seção mais adequada. Obrigado.
头像

Bruno Bezerra

  • 帖子: 16
  • 注册: 周三 3月 26, 2014 8:31 pm
  • 地址: Brasil.

Re: Problem with CSS in effect Tooltip

XainPro » 周六 3月 28, 2015 11:18 am

use jquery built-in tool-tip it's easy to use
you can find it's code here
https://jqueryui.com/tooltip/
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1