Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1260586

    I was wondering if it was doable to customize the title attribute of a link.
    Some plugins call is ‘tooltip’. But they don’t do exactly what I want plus, it gets my site heavier and heavier

    Let’s say we have that link: <a title="An awsome theme!" href="">Enfold</a>

    Would it be possible to customize its title:
    – BGround color
    – text color
    – and some other specifications?

    I guess it’s possible using CSS but I don’t know where to start.
    Would anyone please give me some hints and directions to do so?

    • This topic was modified 3 months, 3 weeks ago by  rvga.
    • This topic was modified 3 months, 3 weeks ago by  rvga. Reason: give more information to my request

    Hey rvga,

    This would require a bit of css knowledge. Refer to the following:

    Best regards,
    Jordan Shannon


    Thanks Jordan,
    I ended up on stackoverflow as well.
    It’s a bit beyond of my scope but I will give a chance… some times.



    Could you please post a link to your page and a screenshot showing the changes you would like to make so we can see if we can help you with it? :)
    You can upload your screenshots on or Dropbox public folder and post the links here.

    Best regards,


    Yes Yigit thx for coming.
    Please see on Stackoverflow the example I’d like to get – if possible, I’m aware it might be too much asking.

    and the customized title would that one:



    Please add following line to your content (using Code Block element or text tab on Text Block element) and adjust it as needed

    <a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

    Then add following code to Enfold theme options > General Styling > Quick CSS field

    a.tip {
        border-bottom: 1px dashed;
        text-decoration: none
    a.tip:hover {
        cursor: help;
        position: relative
    a.tip span {
        display: none
    a.tip:hover span {
        border: #c0c0c0 1px dotted;
        padding: 5px 20px 5px 5px;
        display: block;
        z-index: 100;
        background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
        left: 0px;
        margin: 10px;
        width: 250px;
        position: absolute;
        top: 10px;
        text-decoration: none

    That should be it :)
    Best regards,


    Hi Yigit
    I’ve followed your instructions but unfortunatelly it doesn’t work as expected:
    Where am I wrong?



    Your text is not wrapped inside Span tags. Please wrap the text you would like to display as tooltip in Span tags as following

    <a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>



    With the <span> tag it works just fine, thx

    I’ve tried to play around with the parameters but couldn’t figure out how to change the text color and the bg color….
    Any advices



    Please add following code to bottom of Quick CSS field and adjust as needed

    a.tip span {
        color: orange;
        background-color: red !important;



    Thx for the last tip Yigit. I will do some trials later to see the best tooltip I can design.

    I really want to thank you Yigit – you and all the rest of the support team.
    I just wanted to let you know that your help is extremely valuable to me and probably to many other people who like me are not developers.

    With your help I can ‘almost’ manage myself to make a better site using Enfold.
    Congrats to all of you.



    You are welcome and thank you for your kind message! We really appreciate it :)
    We are always here ready to help so if you have any other questions or issues, please feel free to start new threads :)

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Customising the title attribute of a text link’ is closed to new replies.