CODEWITHSUNDEEP
javascriptjquery
David Brierton
David Brierton

Reputation: 7397

Javascript Hover Text

I am trying to create a hover that shows a list to the user and reminds the user what we can accept. 

<div class="proofresidencytip" style="display:inline-block;">
  Hover Picture
</div>

$(".proofresidencytip").hover(
        function(){
            var message = "Please submit a copy of one of the following:";
            var div = '<div class="rvtooltips">'+message+'</div>';
            $(this).append(div);
            $(this).find(".rvtooltips").fadeIn("fast");

        },
        function(){
            var tt = $(this).find(".rvtooltips");
            tt.fadeOut("fast", function(){
                tt.remove();
            });
        }
    );

http://jsfiddle.net/jw6zc4hf/

I am trying to figure out how I can list the items in var message. Whenever i try using <br> or any other html code it just breaks and doesnt show the message at all. How can I display new lines and the list of items in the hover?

Any help would be greatly appreciated!

Upvotes: 0

Views: 82

Answers (1)

Aurel B&#237;l&#253;
Aurel B&#237;l&#253;

Reputation: 7981

I am not sure what the problem is? You can place <br> into message just fine:

$(".proofresidencytip").hover(
        function(){
            var message = "Please submit a copy of one of the following:<br>a<br>b";
            var div = '<div class="rvtooltips">'+message+'</div>';
            $(this).append(div);
            $(this).find(".rvtooltips").fadeIn("fast");

        },
        function(){
            var tt = $(this).find(".rvtooltips");
            tt.fadeOut("fast", function(){
                tt.remove();
            });
        }
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="proofresidencytip" style="display:inline-block;">
  Hover Picture
</div>

If you have simplified your example in order to post the question on SO, you may have omitted some relevant CSS. If your proofresidencytip class has a set height, for example, it cannot easily expand. Make sure to set padding, line-height, perhaps min-height, but NOT height nor overflow: none.

Upvotes: 1

Related Questions