Search code examples
wordpressmobiletooltip

Showing text from data-content attribute


I am wondering if it's possible to display text that is already in the data-content attribute within an a tag without hover?

I have text in a tooltip that I need to output on mobile without the hover effect so that users can see it. The problem is it is built in already in a parent theme and on mobile, the text inside the tooltip does not display.

<a href="#" class="tooltips" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="My text that I want to display on mobile" data-original-title="" title="">
    <img src="image">
</a>

For reference as to what I mean, see this link: Link to tooltip icons


Solution

  • In bootstrap (as I assume your wordpress theme is based on) it would be

    $('.tooltips').tooltip({
        title: function() {
            return $(this).attr('data-content')
        }    
    })    
    

    demo -> http://jsfiddle.net/bozyh4co/