<span> Question

Support
#1

Today I switched to X Theme (finally had some time) and I am converting my old site to the theme.
I had a code to display a hover window with extended information and did this via ‘span’ and CSS

CSS:

.tooltip:hover span {
	display:inline;
	position:absolute;
	border: 2px inset #2E9DC2;
	background: none repeat scroll 0% 0% rgb(38, 38, 38);
	text-shadow: 2px 0 0 rgba(23, 23, 23, 0.9);
	color: rgb(219, 219, 219);
	z-index: 99;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:420px;
	margin: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

.tooltip span {
	display:none;
}

and this html (How do you add code here?)

So if you hovered over the

  • player.addperk be127 : adds the Alchemist perk

a window popped up with the information “Alchemist…Potions and poisons you make are 20% stronger.”

I just can’t get this to work using the x-theme. All text inside the ‘li’ disappears, any ideas?

Thanks for reading.

#2

Hello There,

Thanks for writing in! Please have your code updated and use something like this instead:

.tooltip {
  position: relative;
}

.tooltip:hover span {
	display: inline-block;
	position:absolute;
        left: 0;
        bottom: 0;
	border: 2px inset #2E9DC2;
	background: none repeat scroll 0% 0% rgb(38, 38, 38);
	text-shadow: 2px 0 0 rgba(23, 23, 23, 0.9);
	color: rgb(219, 219, 219);
	z-index: 99;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:420px;
	margin: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

.tooltip span {
	display:none;
}

Hope this helps. Please let us know how it goes.

#3

Thank You for the reply, at least we have the placeholder for the li items shown now, but they are still invisible

<li class="tooltip">player.addperk c07ca : adds the Alchemist perk
	<span><b>Alchemist</b>
		<p>Potions and poisons you make are 40% stronger.</p>
	</span>
</li>
#4

When I use this html it works fine, but when I insert the CSS into XTheme Ethos the LI items are not shown and henc eI cannot hover over them to make it work.

<!DOCTYPE html>
<html>
<style>
.tooltip:hover span {
	display: inline-block;
	position:absolute;
	border: 2px inset #2E9DC2;
	background: none repeat scroll 0% 0% rgb(38, 38, 38);
	text-shadow: 2px 0 0 rgba(23, 23, 23, 0.9);
	color: rgb(219, 219, 219);
	z-index: 99;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:420px;
	margin: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

.tooltip span {
	display:none;
}

</style>
<body>
<h1>Test</h1>
	<ul>
		<li class="tooltip">player.addperk c07ca : adds the Alchemist perk
			<span><b>Alchemist</b>
				<p>Potions and poisons you make are 40% stronger.</p>
			</span>
		</li>
	</ul>
</body>
</html>
#5

Hello There,

Thanks for updating in! Could you please provide the url of where we can find your test regarding this issue? We want to take a closer look at your setup and other css codes which may have been in conflict.

Hope this helps.

#7

Here is a Link to the section referenced above

#8

Hi There,

I’d advice you change your class tooltip because X is already using that class and it is conflicting, try to change it to my-tooltip.

.my-tooltip:hover span {
	display: inline-block;
	position:absolute;
	border: 2px inset #2E9DC2;
	background: none repeat scroll 0% 0% rgb(38, 38, 38);
	text-shadow: 2px 0 0 rgba(23, 23, 23, 0.9);
	color: rgb(219, 219, 219);
	z-index: 99;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:420px;
	margin: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

.my-tooltip span {
	display:none;
}

	<ul>
		<li class="my-tooltip">player.addperk c07ca : adds the Alchemist perk
			<span><b>Alchemist</b>
				<p>Potions and poisons you make are 40% stronger.</p>
			</span>
		</li>
	</ul>

If you’re curious how the X tooltip/popover element looks like, add this on a RAW content element:

[extra href="#example" title="Alchemist" info="popover" info_place="top" info_trigger="hover" info_content="Potions and poisons you make are 40% stronger." ] player.addperk c07ca : adds the Alchemist perk [/extra]

One down side of using this popover shortcode though is you can not use an HTML markup inside it.

Cheers!

1 Like
#9

Yeah, that was it… I changed all

<li class="tooltip">

to

<li class="qttip">

also changed the custom css from tooltip to qttip and it worked! Thank You

I tried to find a list of all the short codes, can you direct me to it?

#10

Hi There,

Please Scroll Down and you will find a Shortcode lists.

Hope it helps

1 Like
#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.