Text when hovered

Hi again ! How can I have text bubble appear when text or link is hovered. For example when someone hovers over "profile" the bubble should appear on top saying "see your details". Thanks
Regards,
Mwale

  • Bojan Radonic

    Hey Mwale,

    How are you doing today?

    This is definitely possible but it would require some custom coding and this would depend on where exactly you want this added.

    If this is going to to work on all profile links then in short I believe the easiest way to do this would be to use jQuery, first to prepend an element (the bubble or whatever you want it to be) to these specific links by using prepend in jQuery, see here: http://api.jquery.com/prepend/. This will allow you to simply add an element before every profile link.

    Then you can use jQuery to show that specific element only when profile link is hovered, please see here: http://stackoverflow.com/questions/1119956/hover-element-a-show-hide-element-b

    If you need additional assistance with this please post link to your site where I can see this link (Or grant access via WPMU DEV Dashboard and let me know where I can see it).

    Hope this helps :slight_smile:

    Cheers,
    Bojan

  • Mwale

    Hi Bojan Radonic !
    I am well and I hope you are too :smiley: !
    I am actually trying to do this with simple text. For example this paragraph below;
    <p>Tiger </p>
    When someone hovers over "tiger" , they should see; "a type of cat". I am sorry for not being clear before. How can I do this?
    My site is m52o.website and support is enabled :smile:
    Thanks for your great reply.
    Regards,
    Mwale

  • Bojan Radonic

    Hey again Mwale,

    If this is going to be the same text then you can try adding the following to your theme functions.php (Ideally you'd want to add it into your child theme functions.php or add it as a mu-plugin just so you're safe once you update your theme):

    add_action('wp_head', 'my_custom_tooltip_thing');
    
    function my_custom_tooltip_thing(){
    ?>
    <script>
    jQuery( document ).ready(function() {
    jQuery('#menu-item-33 a').before(function() {
       return '<div class="mytooltip">See your details</div>';
    });
    jQuery('#menu-item-33 a').hover(
     function() {
       jQuery(this).siblings('.mytooltip').show();
     },
     function() {
       jQuery(this).siblings('.mytooltip').hide();
     }
    );
    });
    </script>
    <?php
    }
    ?>

    You need to make sure you're targeting correct link selector so you'll need to replace this (#menu-item-33 a), if you need help please point to specific link where you want this to appear.

    Once done with that you'll have to style it a bit, you can start by adding the following CSS code in the style.css file of your child theme or if your theme doesn't have custom CSS tab add it in your site using the following plugin:

    http://wordpress.org/plugins/simple-custom-css

    .mytooltip {
        display: none;
        position: absolute;
        top: -40px;
        background-color: #dedede;
        border-radius: 10px;
        padding: 5px;
        border: 1px solid #000;
        width: 145px;
    }

    Please let me know how that goes :slight_smile:

    Cheers,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.