Post in a div

Asked

Viewed 947 times

1

Good morning. I have a div that when clicked, opens a page. So far so good and is working.

Now how do I make so that when the user hovers over that DIV, appear a Popover with the message "To edit click here".

My code is like this:

<div class="card-body card-padding container editar">
     meu conteudo xxxxxxxxxxxx
</div>

When I click on this div, I have a javascript that opens the page I want:

<script type="text/javascript">
        $(document).ready(function () {
       document.querySelector('.editar').onclick = function(){
    window.location = 'http://minhapagina.com';
}
        });
</script>

I’m sorry the silly question... how do I stop when I hover the mouse, pop up the?

Grateful

jquery twitter-bootstrap bootstrap-3 popover

  • Amanda I gave you an answer using the standard component of Bootstrap3 that is in the tag of your question. But there are ways to do only with CSS also in the element :Hover

1 answer

1


As you put in the question tag Bootstrao 3 I will consider that you are using it.

Boostrap 3 has this component natively. You don’t need to add anything else to make it work. Here’s the documentation. https://getbootstrap.com/docs/3.3/javascript/#tooltips-examples

Here is a practical example used in documentation. Within the title=" " of the element vc puts your text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    body {
        margin: 40px;
    }
div.btn {
    background-color: red !important;
    background-image: none;
    color: #fff;
}
</style>
</head>
<body>
    
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<div class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="hover na div">isso é uma div</div>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>


    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
    </script>
</body>
</html>

Note that you only need to "start" the popover with this script and use the classes of documentation.

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

Browser other questions tagged jquery twitter-bootstrap bootstrap-3 popover

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