Tooltips

  • Resolved zabriskie73

    (@zabriskie73)


    5 years, 5 months ago

    Hi,

    Is someone know how to insert a tooltip on a word in the text editor ?
    I know it exists 1 or 2 widgets making tooltips, but only in independant section, not inside a text itself. I publish texts, and some difficult words need precision i want to give to reader in a tooltip when he hovers certain word.
    Is there a way to do that ? It would help a lot !

    Thanks !

    Mik

    • This topic was modified 5 years, 5 months ago by zabriskie73.
Viewing 2 replies - 1 through 2 (of 2 total)

  • This isn’t an Elementor feature, but you can probably do it with some CSS.

    You’ll probably need to wrap the word in a span tag so you can apply some CSS to it. There are numerous ways. Here’s one. https://chrisbracco.com/a-simple-css-tooltip/

    Thread Starter zabriskie73

    (@zabriskie73)

    Thanks for your help, but finally i found a solution.

    With Free elementor, we can make tooltip in text editor (text mode) with that :

    a title=”tooltip content”>Content text
    (sorry can’t display here correctly HTML Code)

    Content text.
    It’s like “alt” for image, so it’s tiny but effective.

    With Elementor pro version, i found a video which work too, just need to put the code in CSS area : https://www.youtube.com/watch?v=A_peyTbnEXw

    Personnally, i’ve pasted this code :
    —————————————————————————-
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    }

    .tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    }

    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    —————————————————————————
    Then, on text mode, select the word(s) you want to tooltip and paste this code :

    <div class=”tooltip”>WORDS TO HOVER<span class=”tooltiptext”>TOOLTIP CONTENT</span></div>

    More précision on Youtube video.

    • This reply was modified 5 years, 5 months ago by zabriskie73.
    • This reply was modified 5 years, 5 months ago by zabriskie73.
    • This reply was modified 5 years, 5 months ago by zabriskie73.
    • This reply was modified 5 years, 5 months ago by zabriskie73.
    • This reply was modified 5 years, 5 months ago by zabriskie73. Reason: can't edit correctly HTML code to display it like a comment
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Tooltips’ is closed to new replies.