Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 30, 2021 at 8:11 am #1303003
    Astaryne

    Hi
    I would like to know how it is possible to put the tooltip of the share buttons below?
    By default it is above.
    I tried to find the css class but without success and nothing in the doc …
    Thank you
    Best Regards
    Seb

    May 31, 2021 at 3:51 pm #1303215
    Yigit

    Hey Seb,

    Please edit your Social Buttons element and give it a custom ID in Advanced > Developer Settings (“custom-share” in example below) and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

    #custom-share .av-share-box .avia-related-tooltip {
    top: 360px !important;
}
#custom-share .avia-related-tooltip .avia-arrow-wrap .avia-arrow {
    top: -60px;
}

    If that does not help, please post a link of your page :)

    Best regards,
    Yigit

    May 31, 2021 at 5:58 pm #1303244
    Astaryne

    Hi Yigit
    I can’t add an ID because this is the default bar in blog pages
    But I try with this of course

    .av-share-box .avia-related-tooltip {
    top: 360px !important;
}
.avia-related-tooltip .avia-arrow-wrap .avia-arrow {
    top: -60px;
}

    But the result is not good > see image
    And the problem is to move the arrow> put it up rather than down obviously … but what is the css class
    Thanks
    Regards
    Seb

    June 2, 2021 at 6:58 am #1303505
    Rikard

    Hi,

    Please try this instead:

    .av-share-box .avia-related-tooltip {
    top: 600px !important;
}

.avia-related-tooltip .avia-arrow {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    top: -7px !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.