tool tip

chitrag · January 28, 2016

Hello,

This code works perfectly in my computer but when I use same in web site it does not function properly. Page elements are does not appear. Only mouse over tool tips are seen.

<table border="0" width="100%">
	<tr>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo1_tip')">
    <a href="http://www.egtours.com/10_days_nepal_trip.php"><img src="_DSC0160.jpg"><p>10 Days Nepal Trip</p></a>
</span> 
<div style="display:none;">
    <div id="demo1_tip">
        <a href="http://www.egtours.com/10_days_nepal_trip.php"><h3>10 Days Nepal Trip</h3></a>
        <img src="http://www.egtours.com/images/buddhist/5t.jpg" style="float:right;" />
    	<i><p>City Tour, Culture, People, Wildlife Viewing, Hiking & more</p></i>
			<font color="#CC0000"><b>Price from US$ 1645</b> <p><a href="http://egtours.trekksoft.com/en/tours/15420/10-days-nepal-trip">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo2_tip')">
    <a href="http://www.egtours.com/kathmandu_stopover.php"><img src="http://www.egtours.com/images/thumb-kal-bhairab.jpg"><p>Kathmandu Stopover</p></a>
</span> 
<div style="display:none;">
    <div id="demo2_tip">
        <a href="http://www.egtours.com/kathmandu_stopover.php"><h3>Kathmandu Stopover</h3></a>
        <img src="http://www.egtours.com/images/weekend/thumbs/4.jpg" style="float:right;" />
    	<i><p>Explore three ancient cities of Kathmandu Valley</p></i>
			<font color="#CC0000"><b>from US$ 490</b> <p><a href="http://egtours.trekksoft.com/en/tours/26051/kathmandu-stopover">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo3_tip')">
    <a href="http://www.egtours.com/ultimate_tibet_experience.php"><img src="http://www.egtours.com/images/tibet/thumbs/p1014211.jpg"><p>Ultimate Tibet Experience</p></a>
</span> 
<div style="display:none;">
    <div id="demo3_tip">
        <a href="http://www.egtours.com/ultimate_tibet_experience.php"><h3>Ultimate Tibet Experience</h3></a>
        <img src="http://www.egtours.com/images/buddhist/5t.jpg" style="float:right;" />
    	<i><p>Lhasa,Potala Palace, Dalai Lama, culture, Buddhism & more& more</p></i>
			<font color="#CC0000"><b>Price from US$ 1992</b> <p><a href="http://egtours.trekksoft.com/en/tours/15823/ultimate-tibet-experience">Check 
			here</a></p>
    </div>
</div></td>
	</tr>
	<tr>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo4_tip')">
    <a href="http://www.egtours.com/Kathmandu_Lhasa_Shortbreak.php"><img src="http://www.egtours.com/images/tibet/thumbs/ap1014462.jpg"><p>Kathmandu Lhasa Shortbreak</p></a>
</span> 
<div style="display:none;">
    <div id="demo4_tip">
        <a href="http://www.egtours.com/Kathmandu_Lhasa_Shortbreak.php"><h3>Kathmandu Lhasa Shortbreak</h3></a>
        <img src="http://www.egtours.com/images/tibet/thumbs/ap1014462.jpg" style="float:right;" />
    	<i><p>Historic Sights of Kathmandu, Bhaktapur, Lalitpur & Lhasa</p></i>
			<font color="#CC0000"><b>Price from US$ 1160 </b> <p><a href="http://egtours.trekksoft.com/en/tours/22108/kathmandu-lhasa-shortbreak">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo5_tip')">
    <a href="http://www.egtours.com/nepal_bhutan_tour.php"><img src="http://www.egtours.com/bhutan/thumbs/DSCN3279.jpg"><p>Nepal Bhutan Tour</p></a>
</span> 
<div style="display:none;">
    <div id="demo5_tip">
        <a href="http://www.egtours.com/nepal_bhutan_tour.php"><h3>Nepal Bhutan Tour</h3></a>
        <img src="http://www.egtours.com/bhutan/thumbs/DSCN3279.jpg" style="float:right;" />
    	<i><p>Visit Kathmandu Durbar Square, Thimpu, Paro, Punakha, Tiger Nest & more</p></i>
			<font color="#CC0000"><b>Price from US$ 1665</b> <p><a href="http://www.egtours.com/Tour_Reservation_Form.php">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo6_tip')">
    <a href="http://www.egtours.com/Eastern_Himalayas.php"><img src="http://www.egtours.com/images/eastern/thumbs/DSCF0713.jpg"><p>Eastern Himalayas</p></a>
</span> 
<div style="display:none;">
    <div id="demo6_tip">
        <a href="http://www.egtours.com/Eastern_Himalayas.php"><h3>Eastern Himalayas</h3></a>
        <img src="http://www.egtours.com/images/eastern/thumbs/DSCF0713.jpg" style="float:right;" />
    	<i><p>Culture, nature, people, Nepal, Bhutan, Sikkim& more</p></i>
			<font color="#CC0000">
			<b>Price from US$ 3078</b> <p><a href="http://www.egtours.com/Tour_Reservation_Form.php">Check 
			here</a></p>
    </div>
</div></td>
	</tr>
</table>

dsonesuk · January 28, 2016

You have invalid html, the very first thing you should do, before posting, is validate your code, because THAT could be the problem.

Also you have not provided enough details to give a solution.

There is no javascript code link for tooltip function, so the only answer with code provided, is... that! is the problem.

chitrag · January 28, 2016

I have used above code in my page www.egtours.com

You can check mouse over just below main text contents of the page. There should appear some pictures but nothing appear.

dsonesuk · January 28, 2016

You have conflict in the use of .tooltip class between bootstrap and tooltip plugin.

i suggest adding class "non_bs_tooltips" to table containing these tooltip images

<table border="0" width="100%" class="non_bs_tooltips">
	<tr>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo1_tip')">
    <a href="http://www.egtours.com/10_days_nepal_trip.php"><img src="_DSC0160.jpg"><p>10 Days Nepal Trip</p></a>
</span> 
<div style="display:none;">
    <div id="demo1_tip">
        <a href="http://www.egtours.com/10_days_nepal_trip.php"><h3>10 Days Nepal Trip</h3></a>
        <img src="http://www.egtours.com/images/buddhist/5t.jpg" style="float:right;" />
    	<i><p>City Tour, Culture, People, Wildlife Viewing, Hiking & more</p></i>
			<font color="#CC0000"><b>Price from US$ 1645</b> <p><a href="http://egtours.trekksoft.com/en/tours/15420/10-days-nepal-trip">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo2_tip')">
    <a href="http://www.egtours.com/kathmandu_stopover.php"><img src="http://www.egtours.com/images/thumb-kal-bhairab.jpg"><p>Kathmandu Stopover</p></a>
</span> 
<div style="display:none;">
    <div id="demo2_tip">
        <a href="http://www.egtours.com/kathmandu_stopover.php"><h3>Kathmandu Stopover</h3></a>
        <img src="http://www.egtours.com/images/weekend/thumbs/4.jpg" style="float:right;" />
    	<i><p>Explore three ancient cities of Kathmandu Valley</p></i>
			<font color="#CC0000"><b>from US$ 490</b> <p><a href="http://egtours.trekksoft.com/en/tours/26051/kathmandu-stopover">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo3_tip')">
    <a href="http://www.egtours.com/ultimate_tibet_experience.php"><img src="http://www.egtours.com/images/tibet/thumbs/p1014211.jpg"><p>Ultimate Tibet Experience</p></a>
</span> 
<div style="display:none;">
    <div id="demo3_tip">
        <a href="http://www.egtours.com/ultimate_tibet_experience.php"><h3>Ultimate Tibet Experience</h3></a>
        <img src="http://www.egtours.com/images/buddhist/5t.jpg" style="float:right;" />
    	<i><p>Lhasa,Potala Palace, Dalai Lama, culture, Buddhism & more& more</p></i>
			<font color="#CC0000"><b>Price from US$ 1992</b> <p><a href="http://egtours.trekksoft.com/en/tours/15823/ultimate-tibet-experience">Check 
			here</a></p>
    </div>
</div></td>
	</tr>
	<tr>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo4_tip')">
    <a href="http://www.egtours.com/Kathmandu_Lhasa_Shortbreak.php"><img src="http://www.egtours.com/images/tibet/thumbs/ap1014462.jpg"><p>Kathmandu Lhasa Shortbreak</p></a>
</span> 
<div style="display:none;">
    <div id="demo4_tip">
        <a href="http://www.egtours.com/Kathmandu_Lhasa_Shortbreak.php"><h3>Kathmandu Lhasa Shortbreak</h3></a>
        <img src="http://www.egtours.com/images/tibet/thumbs/ap1014462.jpg" style="float:right;" />
    	<i><p>Historic Sights of Kathmandu, Bhaktapur, Lalitpur & Lhasa</p></i>
			<font color="#CC0000"><b>Price from US$ 1160 </b> <p><a href="http://egtours.trekksoft.com/en/tours/22108/kathmandu-lhasa-shortbreak">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo5_tip')">
    <a href="http://www.egtours.com/nepal_bhutan_tour.php"><img src="http://www.egtours.com/bhutan/thumbs/DSCN3279.jpg"><p>Nepal Bhutan Tour</p></a>
</span> 
<div style="display:none;">
    <div id="demo5_tip">
        <a href="http://www.egtours.com/nepal_bhutan_tour.php"><h3>Nepal Bhutan Tour</h3></a>
        <img src="http://www.egtours.com/bhutan/thumbs/DSCN3279.jpg" style="float:right;" />
    	<i><p>Visit Kathmandu Durbar Square, Thimpu, Paro, Punakha, Tiger Nest & more</p></i>
			<font color="#CC0000"><b>Price from US$ 1665</b> <p><a href="http://www.egtours.com/Tour_Reservation_Form.php">Check 
			here</a></p>
    </div>
</div></td>
		<td><span class="tooltip" onmouseover="tooltip.pop(this, '#demo6_tip')">
    <a href="http://www.egtours.com/Eastern_Himalayas.php"><img src="http://www.egtours.com/images/eastern/thumbs/DSCF0713.jpg"><p>Eastern Himalayas</p></a>
</span> 
<div style="display:none;">
    <div id="demo6_tip">
        <a href="http://www.egtours.com/Eastern_Himalayas.php"><h3>Eastern Himalayas</h3></a>
        <img src="http://www.egtours.com/images/eastern/thumbs/DSCF0713.jpg" style="float:right;" />
    	<i><p>Culture, nature, people, Nepal, Bhutan, Sikkim& more</p></i>
			<font color="#CC0000">
			<b>Price from US$ 3078</b> <p><a href="http://www.egtours.com/Tour_Reservation_Form.php">Check 
			here</a></p>
    </div>
</div></td>
	</tr>
</table>

Then in custom.css add

.non_bs_tooltips .tooltip {

    opacity: 1;

    position: relative;

}

This will cancel out the main bootstrap .tooltip class styling causing the problems, i presume the table and content are manually created, so adding the class="non_bs_tooltips", won't be overwritten on update of tooltip feature.

Edited January 28, 2016 by dsonesuk

chitrag · January 29, 2016

Thank you so much !

That worked perfectly. But there some conflicts between my custom.css file and bootstrap's css file. So, there are few issues arose like fonts, font colors, etc

Edited January 29, 2016 by chitrag

dsonesuk · January 29, 2016

Then use the new custom selector to adjust tooltip to your requirements.

chitrag · January 31, 2016

<span class="tooltip" onmouseover="tooltip.pop(this, '#demo1_tip')">
    <a href="http://www.egtours.com/10_days_nepal_trip.php"><img src="http://www.egtours.com/images/10daysnepal/thumbs/_DSC0160.jpg"><p>10 Days Nepal Trip</p></a>
</span> 
<div style="display:none;">
    <div id="demo1_tip">
        <a href="http://www.egtours.com/10_days_nepal_trip.php"><h3>10 Days Nepal Trip</h3></a>
        <img src="http://www.egtours.com/images/buddhist/5t.jpg" style="float:right;" />
    	<i><p>City Tour, Culture, People, Wildlife Viewing, Hiking & more</p></i>
			<font color="#CC0000"><b>Price from US$ 1645</b> <p><a href="http://egtours.trekksoft.com/en/tours/15420/10-days-nepal-trip">Check 
			here</a></p>
    </div>
</div>

Above code works fine. But html validation says error

egtours.com/images/eastern/thumbs/DSCF0713.jpg"></a><p>Eastern Himalayas</p>

✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

How to fix ?

Ingolme · January 31, 2016

You can't put a block level element, such a <p> inside an inline element like <i>. If you want the <p> and <a> tag to be italic, use CSS to style them.

You probably shouldn't be putting <h3> inside the <a> element either, it should be the other way around. Even if the validator doesn't complain about it.

dsonesuk · January 31, 2016

You probably shouldn't be putting <h3> inside the <a> element either, it should be the other way around. Even if the validator doesn't complain about it.

It will complain because hes still using transitional doctype, and I'm pretty sure the font tag requires a closing font tag STILL!

Do you EVER, OR have you EVER validated your code? Before posting.

Edited January 31, 2016 by dsonesuk

chitrag · January 31, 2016

What can be the better code work with it. for example ? How to validate code ?

Edited January 31, 2016 by chitrag

dsonesuk · January 31, 2016

https://validator.w3.org/#validate-by-upload

tool tip

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in