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

    Hello
    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="https://kriesi.at/themes/enfold-overview/">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
    #1260598

    Hey rvga,

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

    https://stackoverflow.com/a/17579580

    Best regards,
    Jordan Shannon

    #1261009

    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.
    Thx.

    #1261016

    Hi,

    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 imgur.com or Dropbox public folder and post the links here.

    Best regards,
    Yigit

    #1261046

    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.
    https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag

    and the customized title would that one: https://twiners.fr/sharing/JZF0TJdmW

    #1261049

    Hey,

    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,
    Yigit

    #1264013

    Hi Yigit
    I’ve followed your instructions but unfortunatelly it doesn’t work as expected: https://c-serp.fr/sand-box-enfold/
    Where am I wrong?

    #1264015

    Hey,

    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>
    

    Cheers!
    Yigit

    #1264016

    Damn’it.
    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

    #1264019

    Hi,

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

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

    Regards,
    Yigit

    #1264033

    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.

    #1264040

    Hi,

    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,
    Yigit

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

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