Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 16, 2017 at 10:33 pm #762243
    webWahine

    Hello

    My page is below, in the private area. I have looked at lots of posts and tried the css below. I have added the class ttDescr to just the first hotspot, which is the top left. Its supposed to be centered text, not justified, and it should also have a tight line height and be bold but for some reason these are not being applied. Please advise and thanks in advance!

    .av-hotspot-container .av-image-hotspot_inner {
	text-align: center;	
}

/* hotspot tooltip hover */

.avia-tooltip .avia-arrow {
	display: none;
}

.avia-tooltip {
	/* dk grey */
	background: rgba(51, 51, 51, 1) !important;
	border: solid 1px #fff !important;
}

/* custom class to style text */

.ttDescr {
	font-size: 14px !important;
	line-height: 14px !important;
	color: #fff !important;
	font-style: normal;
	font-weight: bold;
	text-align: center !important;	
}
    March 20, 2017 at 2:45 am #763419
    Jordan Shannon

    Hey webWahine,
    I added the following to quick css:

    .ttDescr{
text-align:center !important;
letter-spacing:1px;
word-spacing:0px;
font-weight:bold;
font-size: 14px !important;
}

.page-id-514 .avia-tooltip p{
text-align:center !important;
margin:0 auto !important;
line-height:15px;
}

    Let me know if this is what you needed.

    Best regards,
    Jordan Shannon

    March 20, 2017 at 6:20 pm #763731
    webWahine

    That worked, thanks! I was trying to avoid having to create a unique class inside each hotspot description but as long as it works that’s all that matters :)

    March 20, 2017 at 6:23 pm #763734
    Jordan Shannon

    Hi,

    Great! I am glad this was able to be fixed for you. If you need additional help, please do not hesitate to contact us.

    Best regards,
    Jordan Shannon

    March 20, 2017 at 6:26 pm #763736
    webWahine

    I’m curious as to why I need a unique class to make the text styled as I wish as opposed to just using this –

    .page-id-514 .avia-tooltip p {
all styling in here instead
}

    I like to understand :)

    March 20, 2017 at 6:45 pm #763742
    Jordan Shannon

    Hi,

    Because otherwise the style would apply to all instances of  

    .avia-tooltip p

    Best regards,
    Jordan Shannon

    March 20, 2017 at 6:46 pm #763743
    Jordan Shannon

    Hi,

    And the only one having issue was the one you pointed out.
    Best regards,
    Jordan Shannon

    March 20, 2017 at 6:49 pm #763744
    webWahine

    Mmmm, ok, I get that but I only use the tooltip in one place on the entire site so in theory all the styling could be there, right? That’s why I’m a bit confused because it doesn’t work there, but that’s ok, no bid deal to have an extra class :)

    March 20, 2017 at 8:17 pm #763765
    Jordan Shannon

    Hi,

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Can't get hotspot tooltip text to change’ is closed to new replies.