Search the Community

Here is the code from w3: <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 500px; background-color: black; color: #fff; text-align: left; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; left: 0%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> Here it is inside body: <div class="tooltip"> text text text <span class="tooltiptext"> <!-- <span class="tooltiptext" width: 800px;> did not work --> <!-- <style="width; 800px"> tooltip text </style> did not work --> tooltip text </span> </div> I need to set a specific width for each tooltip. I have tried several ways: " . style="width: 800px /. " but it did not work

I need help solving two problems I am encountering with some tooltips that I created based on the W3Schools tooltip tutorial. Here is the page with the tooltips: http://wildadirondacks.org/adirondack-wildflowers-starflower-trientalis-borealis.html Here is my html code for one of the paragraphs with tooltips: <p>Starflower <strong>leaves</strong> vary considerably in size, from 1½ inches to about 4 inches in length.</p> <ul> <li>Starflower leaves are <div class="tooltip">lance-shaped<span class="tooltiptext"><img src="images/Lanceolate.jpg" alt="Lanceolate" title="Lanceolate">Lanceolate: A leaf shaped like a lance head, tapering to a point at each end.</span></div> , tapering to a tip. </li> <li>The leaves are arranged in a single <div class="tooltip">whorl <span class="tooltiptext"><img src="images/Whorled.jpg" alt="Whorled Leaf Arrangement" title="Whorled Leaf Arrangement">Whorled: Leaves arranged in a circle around a central point.</span> </div> with 5 to 9 leaves (most commonly 7) near the top of the stem. </li> <li>The leaf edges are <div class="tooltip">smooth<span class="tooltiptext"><img src="images/Leaf-Margin-Smooth.jpg" alt="Smooth leaf margin" title="Smooth leaf margin">Smooth leaf edges do not have any teeth.</span></div>, with no or very fine teeth.</li> <li> <div class="tooltip">Leaf venation<span class="tooltiptext"><img src="images/Veins.jpg" alt="Veins of a leaf" title="Veins of a leaf">Leaf Venation: The arrangement of veins in a leaf.</span></div> is <div class="tooltip">pinnate<span class="tooltiptext"><img src="images/Pinnate-Leaf-Venation.jpg" alt="Pinnate Leaf Venation" title="Pinnate Leaf Venation">Pinnate Leaf Venation: A vein arrangement in a leaf with one main vein extending from the base to the tip of the leaf and smaller veins branching off the main vein.</span></div>, meaning that there is one main <div class="tooltip">vein<span class="tooltiptext"><img src="images/Veins.jpg" alt="Veins of a leaf" title="Veins of a leaf">Vein: A vessel that conducts nutrients, sugars, and other substances throughout plant tissues; usually associated with leaves. The arrangement of veins in a leaf is called the venation pattern.</span></div> running from the base to the tip and secondary veins branching off at intervals.</li> </ul> Here is my css code: /* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 200px; background-color: #000; color: #fff; text-align: left; padding: 5px; border-radius: 4px; font-size: 14px; /* Position the tooltip text */ position: absolute; z-index: 100; bottom: 100%; left: 50%; margin-left: -100px; /* Fade in tooltip */ opacity: 0; transition: opacity 1s; } /* Tooltip arrow */ .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltip img { float:left; margin:0px 8px 8px 0; width: 200px; border-radius: 4px; } I have two problems: 1. The tooltips only work when they are inserted within an ordered list. When I try to insert a tooltip in a paragraph, I get an unwanted line break. I have fiddled around with the css, to no avail. (I can provide a screen shot, if needed.) 2. The tooltips as currently configured work fine on all six of my desktop browsers (Chrome, Firefox, Opera, Safari, Edge, Internet Explorer), opening as desired on mouseover. The tooltips also work fine on two of the browsers on my iPad (Opera Mini and Firefox), opening on touch. However, the tooltips do not work at all on the iPad in either Safari or Chrome; when I touch the target term, nothing happens. I tried this out on some iPad emulators, and the tooltips worked, but they didn’t work on the actual iPad for either Safari or Chrome. Your tooltip examples work beautifully on all browsers on both my desktop and iPad, so it’s something I am doing wrong. I have searched the forum for an answer, searched the internet, and fiddled around with the code for days, to no avail. Please help! Thanks, ellen

HI there, first i apology my english not too well, hope you may understand what i mean ,Thanks Im try to using the Bootstrap one of the function is popover similar like tooltips, but i facing the problem For example : <div id="all"> <div id="a" class="circle_ball" data-user-id="2">●</div> <div id="b" class="circle_ball" data-user-id="1">●</div> </div> and my Jquery code is : $('#all').on('mouseenter','div',function(){ $(this).popover({ title: 'Jun Hoo', content: $(this).attr('data-user-id'), trigger:'hover', html:true }); }); but the result on the code will showing delay and at least need to hover the target more than 2 time ... any ways to figure out? thanks you so much i found ways to solve the delay speed, but will keep popover the content when mouse pointer hover the first popover body the ways is add one more code --- $('#all').popover({title: 'Loading', content: '...',selector: 'div',trigger:'hover',html:true}); Thanks for helping

I have created some tooltips based on http://sixrevisions.com/css/css-only-tooltips/ They work great and look great. The only issue is that in IE, the "img" is misplaced. Unfortunately, the only way I've been able to get the tooltips to work is by putting the css in th php document itself in a tag. This precludes me from being able to use an ie.css sheet because the styling in the doc would overrule it, right? The website is www.cleantelligent.com/cleantelligent-pricing and cleantelligent.com/cleantelligent-pricing/custom-package/ Any idea how I can move those images over so they line up on IE?