Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 17, 2017 at 10:22 pm #795121
    MulattoTech

    The title pretty much sums up the question. I’m looking to add a black 1px border to the tooltip box that pops up when you hover over a hotspot in an image.

    I’ve looked through the theme’s customization options, and have searched the forums here to no avail.
    I’ve also tried adding this code to the theme’s Quick CSS box, but still no dice. 

    .av-hotspot-container .av-image-hotspot_inner {
	border-width: 1px;
	border-color: 000000;

}

    If anyone could shed some light on this, it’d be much appreciated.

    Thanks!

    May 17, 2017 at 10:38 pm #795131
    Yigit

    Hey MulattoTech,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    
.avia-tooltip.av-tt-hotspot {
    border: 1px solid #000000!important;
}

    Best regards,
    Yigit

    May 17, 2017 at 11:07 pm #795142
    MulattoTech

    Thanks a ton Yigit, and I appreciate the expedient response.

    There’s one gotcha, however. When I mouse over a hotspot, there’s a slight gap in the border outline. I’ve attached a photo to illustrate what I’m referencing.

    In this photo, I am mousing over the top “1” image hotspot. My hotspot settings are Tooltip Position = Left Centered and Tooltip Width = Large.

    null

    May 17, 2017 at 11:47 pm #795159
    Jordan Shannon

    Hi,

    Please provide a link to the site/page in question.

    Best regards,
    Jordan Shannon

    May 17, 2017 at 11:49 pm #795161
    MulattoTech

    Here you are. I’ve got the website in the Private Content portion of this post. Let me know if you need me to move it to the regular reply section.

    May 18, 2017 at 3:43 pm #795954
    Victoria

    Hi MulattoTech,

    When I made the border thicker, I was able to see that it’s a triangle, like an arrow, but I cannot find, where it’s coming from.

    
.avia-tooltip.av-tt-hotspot {
    border: 7px solid #000000!important;
}

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look.

    Best regards,
    Victoria

    May 18, 2017 at 3:52 pm #795964
    MulattoTech

    Sure thing, here’s the login information.

    May 19, 2017 at 8:53 pm #796754
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .avia-tooltip.av-tt-pos-right .avia-arrow {
    border: black solid 1px;
}

    That will change border color of triangle to black as well. If you would like to remove it, please use following code

    .avia-tooltip.av-tt-pos-right .avia-arrow {
    display: none;
}

    Best regards,
    Yigit

    May 19, 2017 at 9:30 pm #796785
    MulattoTech

    Thanks so much. Since I can’t imagine an instance where I wouldn’t want that arrow to be black, is there a catchall left, right, top bottom snipped of code I could grab that would color all possible arrow outcomes to be black?

    May 19, 2017 at 9:41 pm #796795
    Yigit

    Hi,

    You are welcome! I attached a screenshot to show how it looks on my end at the moment. I did not understand the changes you would like to make clearly. If you could please elaborate or post a screenshot, it would be great :)

    Best regards,
    Yigit

    May 19, 2017 at 9:43 pm #796797
    MulattoTech

    If you hover over hotspot 1, or 3, which are on the left side, then that’ll demonstrate to what I’m referring.

    Just also trying to avoid needing to add more custom CSS when and if I add a top or bottom opening image hotspot tooltip box.

    But for right now if you’d please look at hot spot 1 and 3, then you’ll hopefully see what I mean.

    May 21, 2017 at 9:57 pm #797313
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .avia-tooltip.av-tt-pos-left .avia-arrow {
    border: 1px solid black;
}

    Best regards,
    Yigit

    May 22, 2017 at 4:43 pm #797760
    MulattoTech

    Thanks, that takes care of the left and the right, but what about the top and bottom? I’ve edited hotspot number 3 at the bottom to display in the “below” fashion if you need an example.

    From the hotspot settings, this is what I’m referring to. Hotspot options

    I tried adding some CSS that I changed from what you posted but this did not work. 

    .avia-tooltip.av-tt-pos-below.avia-arrow {
    border: black solid 1px;
}

    Also, here is an image of the “bottom/below” hotspot that I’ve created. I just need to know what CSS to add for the below and above hotspot options, thanks!

    Below Hotspot Tooltip

    May 22, 2017 at 5:05 pm #797782
    Yigit

    Hi,

    Following code should fix all

    .avia-tooltip .avia-arrow {
    border: 1px solid black;
}

    Sorry it took longer than it should :)

    Best regards,
    Yigit

    May 22, 2017 at 5:11 pm #797789
    MulattoTech

    No problem at all, thanks so much! I’m a little perturbed at myself for not figuring out how to implement this own my own; however, I extremely appreciate your awesome support. Many thanks!

    May 22, 2017 at 5:24 pm #797800
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Add border to Image Hotspot Tooltip box’ is closed to new replies.