EzDevInfo.com

Opentip read table td element title attribute and display as content

<table id="universal-radio-program" title="Uzej ar pelīti uz nosaukumu, lai redzētu aprakstu...">
        <thead>
        <tr><th>&nbsp;</th><th scope="col">Pirmdiena</th><th scope="col">Otrdiena</th><th scope="col">Tre&scaron;diena</th><th scope="col">Ceturtdiena</th><th scope="col">Piektdiena</th><th scope="col">Sestdiena</th><th scope="col">Svētdiena</th><th>&nbsp;</th></tr>
        </thead>
        <tbody>
        <tr>
        <td>00</td>
        <td title="Dance / Hands Up, Trance, New Tunes..." rowspan="2" colspan="4">Prepare for Morning</td>
        <td title="Presents by Universal Radio X selection...">Take The Chance Of Dance with Universal Radio</td>
        <td title="Universal Radio DJ Team Lives...">URDT Live Sets</td>
        <td title="Universal Radio DJ Team Lives...">&nbsp;</td>
        <td><strong>00</strong></td>
        </tr>
        <tr>
        <td>01</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>01</td>
        </tr>
        <tr>
        <td>02</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">Trance Edition!</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">&nbsp;</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">&nbsp;</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">&nbsp;</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">&nbsp;</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">&nbsp;</td>
        <td title="Progressive, Trance, Techtrance, Hard Trance tunes...">&nbsp;</td>
        <td>02</td>
        </tr>
        </tbody>
        <tfoot>
        <tr><th scope="row">&nbsp;</th>
        <td>Pirmdiena</td>
        <td>Otrdiena</td>
        <td>Tre&scaron;diena</td>
        <td>Ceturtdiena</td>
        <td>Piektdiena</td>
        <td>Sestdiena</td>
        <td>Svētdiena</td>
        <th>&nbsp;</th></tr>
        </tfoot>
        </table>

Here is some example:

http://jsfiddle.net/Hwb2S/1/

And i want to Opentip read table td element title attribute and display as grouping opentip content. And remove default title attribute.

My prefer adapter is prototype, but also can be jquery.

All about opentip: http://www.opentip.org

Please update in jsfiddle, with your solutions.

openTip javascript hide by closeButton AND timeout

I am creating a tooltip for comments that should only show momentarily for a few seconds. But it never disappears no matter what options I pick. The openTip documentation is very unclear about how to make a tooltip disappear-by-seconds and lacks examples.

<textarea class="textareaclass" id="body" name="body" placeholder="Comment" data-ot="Spamming is restricted. Comments are subject to US law." data-ot-delay="0.1" data-ot-hide-trigger="closeButton" data-ot-style="alert" data-ot-hidedelay="1.2" data-ot-fixed="true"></textarea>

How do I make it so that the tooltip disappears within 2 seconds and also when there is a click on "X" close button.

No matter what I try, tooltip seems to stay forever. "hidedelay" doesn't do anything.

How to customize Opentip default styles?

I am working on implementing tool tip using opentip framework, Since I am very new to Jquery and Java script I have implemented using Opentip HTML attributes but need to change its styles like tip joint and its background color..

can someone help me out...Find my code below thanks

#tooltip2{padding: 13px 0px 0px 10px;margin: -1px 4px -4px -5px !important;"}

<script src="https://rawgit.com/enyo/opentip/master/downloads/opentip-jquery.js"></script>
<link rel='nofollow' href="https://rawgit.com/enyo/opentip/master/css/opentip.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option" style="width:13%;float:left;">
<label style="padding:10px 0px 0px 10px;" id="tooltip2" data-ot="This is my new tooltip" data-ot-delay="1" data-ot-hide-trigger="closeButton" data-ot-style="glass" data-ot-fixed="true"  data-ot-tipJoint="'left, middle'">Option1</label>

</div>

The Opentip hide() not work

I use the latest version of Opentip and JQuery-1.9.1

there's a comments area in my page, and each comment has a snapshot of user's img. I want it shows a popup when the mouse moves into the snapshot area. The tip can popup when the mouse entered, but hide() which is called when the mouse leave does not work at all. The tip div popups at the same position again when the mouse entered again. pleae help me, Thanks.

Code pieces:

1. bind mouseenter & mouseleave event while all the comments loaded

function refreshTip(className, tipContent) {
    $("." + className).each(function (index, element) {
        $(element).mouseenter(function () {
            showTip(element)
        }).mouseleave(function () {
                var opentips_list = $(element).data("opentips");
               for (var i = 0; i < opentips_list.length; i++) {
                    opentips_list[i].hide();
               }
            });
    });
}

1. the code for the showTip func

    function showTip(object) {
        var tem = new Opentip(object, {
            fixed: true,
            tipJoint: "left",
            target: object
        });
        tem.setContent("What a day!");
        tem.show();
    }

Opentip tooltip not working in IE

I have integerated opentip in my site but it is miss-behaving in IE11. It works fine on submit button but on blur function it gets stuck. My site URL is http://qa.qscourses.com/contact-us/. In simple words when I click from mouse in the first input box then it shows against it when I click in another box it begins miss behave and cursor moves automatically.

How do I create an Opentip tooltip on a select list?

Given this HTML (snippet):

<input type="text" name="sch_alert" value="foo@bar.co.uk" size="40"
maxlength="45" onchange="return valString(this.form.sch_alert, 0, 45, 'Invalid entry
for this field')" title="" id="idsch_alert"
placeholder="Your email address"><input type="text" name="sch_sms" value="44788xxxxxxx"
size="20" maxlength="14" title="" id="idsch_sms" placeholder="Your mobile number"><br>
<label class="companyform" for="idsch_all">All Campaigns?</label>
<select name="sch_all"  title="Select Yes to extract/alert for replies on all
campaigns, otherwise select No and select specific campaigns below." id="idsch_all">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>

The following javascript works:

new Opentip($('idsch_alert'), 'Email to receive reply data alert', 'Alert email', {style: 'myStyle'});
new Opentip($('idsch_sms'), 'Mobile phone number', 'Alert mobile', {style: 'myStyle'});

But this does not:

new Opentip($('idsch_all'), 'Extract all data?', 'Extract', {style: 'myStyle'});

That last gives an error from opentip-prototype.js:

if (this.triggerElement.length > 1) {
  throw new Error("You can't call Opentip on multiple elements.");
}

I'm guessing the problem is the element length is from the number of options, since I can assign a unique ID to each of the options and then create an Opentip for each of those (albeit with positioning errors, which I could probably fix by assigning a different target).

I'm using opentip-prototype.js v2.4.6 (opentip.org)

Opentip styling doesn't work

I using opentip and I tried to style the opentip with custom styling.

These are my code inside coffee.

Opentip.styles.orangetip = { 
  stem: true,
  borderColor: "#ffa358",
  borderWidth: "50",
  background: "#ffa358",
  fixed: true,
  stemLength: "10"
  }

And I even use this block to make my styling as default, but it still doesn't work.

Opentip.defaultStyle = "orangetip"

This is my script to call the style.

tip1 = new Opentip("#testong", "Optional content", { 
  style: "orangetip", 
  showOn: "mouseover"
})

Style doesn't load, but showOn is working. As example if I change "mouseover" into "click", the container will showing with click, not hover.

Anyone know why the style doesn't load? Thank you.