Mouse over image to show information box

Asked

Viewed 3,732 times

1

How do I make a mouse over open a Tooltip and this box does not disappear when removing the mouse focus so I can place a clickable text inside this container?

As an example: the tags that appear here in Stack Overflow.

html css
  • 1

    Hello @Felipe, welcome to [en.so]. How far have you arrived? can post a minimum example as stated in [Ask] of [help]

  • 1

    I think you’re referring to opening a tooltip and not a lightbox... You have to control the Hover of the tooltip itself and prevent it from closing when the mouse exits the trigger element and enters the tooltip.

2 answers

2

Your question was somewhat broad. With the code below you could have the functionality of a hover give visibility to an element.

CSS

.lightbox{
display:none;
}

HTML

<a href="#" class="ExibirLightBox">Exibir</a>

<div class="lightbox>
// Conteudo do lightbox
</div>

SCRIPT

    $(document).ready(function (e) {
        $('.ExibirLightBox').hover(function (e) {
            $(".lightbox").css("display", "block");
        }
    )
    });

  • Good morning Rafael, So, what happens is that when I use a lightbox for example prettyphoto it opens the light box but it is not static afterwards. I needed something like these stack tags, which Voce hovers over the tag and appears that box with information and links.

  • Can you post an example on jsfiddle.net? I’m not sure exactly what your problem is

  • already put only a second.

  • 1

    @Please update the question with the fiddle link and the code. Better put the relevant information in the question itself, so we can find just by hitting the eye.

2

  • Exactly Thallyson, thank you very much

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.