WordPress Shortcode for ToolTip Text (CSS) with Attribute for the Hover Text


I am in the process of making a shortcode for a tooltip text. The general idea is to be able to insert the title and the tooltip text using attributes.


[tt title="Hover me to show the tooltip text"]This will be the tooltip text that is shown when hover the title.[/tt]

I got the CSS and the HTML span tag all done, but I don’t really know how to create the title attribute for the shortcode function.

This is what I got so far:

add_shortcode( 'tt', 'tooltip_shortcode' );
function tooltip_function() {

    // close PHP and add the CSS

    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;

    .tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: -10%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1.0s;

    .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;

    .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;

    // rest of the title attribute PHP code

The idea is to be able to generate an output like this:

<span class="tooltip">hover text to show tooltip text<span class="tooltiptext">This will be the tooltip text that is shown when hover the title.</span>

Any tip or idea on how to make this work? Thanks in advance!

Mike Green 2 months 0 Answers 9 views 0

Leave an answer